如何使html <select>元素看起来像"禁用",但传递值？

Question

当我禁用了

<select name="sel" disabled>
    <option>123</option>
</select>

元素,它不传递其变量.

怎么做才能看起来像残疾人,但处于"正常"状态？

这是因为我有一个"选择"列表,有时它们中的一些具有单个值,因此用户应该理解它只有一个值而不点击它.

Answer 1

您可以根据需要禁用它,然后在提交表单之前删除disabled属性.

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

请注意,如果您依赖此方法,您也希望以编程方式禁用它,因为如果禁用或不支持JS,您将会遇到禁用的选择.

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});

Answer 2

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>   

或者你可以使用jQuery

$("#test option:not(:selected)").prop("disabled", true);

Answer 3

我的解决方案是在CSS中创建一个禁用类:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

然后你的选择将是:

<select name="sel" class="disabled">
    <option>123</option>
</select>

用户将无法选择任何值,但选择值仍将在表单提交时传递.

Answer 4

如果您可以为您的选择提供默认值,那么您可以对未选中的复选框使用相同的方法,这需要在实际元素之前隐藏输入,因为如果未选中则不会发布值:

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

如果通过javascript(或jQuery)禁用了select,或者即使你的代码使用属性:disabled ="disabled"禁用元素本身,html也会实际发布值"default"(显然没有引号).