如何让html <select>元素看起来像是“禁用的”，但却传递了值？

Question

当我禁用

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

元素，它不会传递它的变量。

怎么做才能让它看起来像是被禁用了，但却处于“正常”状态？

这是因为我有一个“选择”列表，有时其中一些只有一个值，所以用户应该知道它只有一个值，而不是单击它。

Answer 1

您可以根据需要保持禁用状态，然后在提交表单之前删除disabled属性。

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

请注意，如果您依赖此方法，则还需要以编程方式禁用它，因为如果JS被禁用或不受支持，您将使用disabled select。

$(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>

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