根据 HTML 规范，selectHTML 中的标签没有readonly属性，只有disabled属性。因此，如果您想阻止用户更改下拉列表，则必须使用disabled.
唯一的问题是禁用的 HTML 表单输入不会包含在 POST / GET 数据中。
模拟标签readonly属性select并仍然获取 POST 数据的最佳方法是什么？
HTML 表单只读 SELECT 标签/输入
IT技术
javascript
html
2021-01-26 03:13:40
6个回答
您应该保留该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>我们还可以禁用除选定选项之外的所有选项。
这样下拉菜单仍然有效（并提交其值），但用户无法选择另一个值。
<select>
<option disabled>1</option>
<option selected>2</option>
<option disabled>3</option>
</select>您可以在提交时重新启用选择对象。
编辑：即，通常禁用选择标记（具有禁用属性），然后在提交表单之前自动重新启用它：
jQuery 示例：
要禁用它：
$('#yourSelect').prop('disabled', true);在提交之前重新启用它以便包含 GET / POST 数据：
$('#yourForm').on('submit', function() { $('#yourSelect').prop('disabled', false); });
此外，您可以重新启用每个禁用的输入或选择：
$('#yourForm').on('submit', function() {
$('input, select').prop('disabled', false);
});
简单的jQuery解决方案
如果您的选择有readonly课程，请使用它
jQuery('select.readonly option:not(:selected)').attr('disabled',true);
或者如果您的选择具有readonly="readonly"属性
$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);
其它你可能感兴趣的问题