HTML 仕様によれば、selectHTML の タグには属性はなくreadonly、disabled属性のみがあります。したがって、ユーザーがドロップダウンを変更できないようにするには、 を使用する必要がありますdisabled。
唯一の問題は、無効にされた HTML フォーム入力が POST / GET データに含まれないことです。
readonlyタグの属性をエミュレートselectし、POST データを取得する最適な方法は何ですか?
ベストアンサー1
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>