HTML 양식 읽기 전용 SELECT 태그 / 입력

질문 : HTML 양식 읽기 전용 SELECT 태그 / 입력

---

HTML 사양에 따르면 HTML의 select 태그에는 readonly 속성 disabled 속성 만 있습니다. 따라서 사용자가 드롭 다운을 변경 disabled 하려면 disabled를 사용해야합니다.

유일한 문제는 비활성화 된 HTML 양식 입력이 POST / GET 데이터에 포함되지 않는다는 것입니다.

select 태그에 대한 readonly 속성을 에뮬레이트하고 여전히 POST 데이터를 얻는 가장 좋은 방법은 무엇입니까?

답변

---

select 요소를 disabled 상태로 유지하고 동일한 이름과 값을 가진 또 다른 숨겨진 input

SELECT를 다시 활성화하는 경우 해당 값을 onchange 이벤트의 숨겨진 입력에 복사하고 숨겨진 입력을 비활성화 (또는 제거)해야합니다.

다음은 데모입니다.

 

 

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

#formdata_container {
	padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

출처 : https://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input