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>

这实际上会发布值“default”（显然没有引号）如果javascript（或jQuery）禁用了select，或者即使你的代码写了html，也会使用以下属性禁用元素本身：disabled =“disabled”

Answer 5

添加课程.disabled并使用此 CSS ：

.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}

演示：http://jsfiddle.net/ZCSRq/

Answer 6

可以使用与禁用列表具有相同名称和值的其他隐藏输入元素。这将确保该值在$ _POST变量中传递。

例如：

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

Answer 7

哇，我遇到了同样的问题，但是一行代码解决了我的问题。我写了

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

我将表单发送到php脚本，然后它为每个选项打印正确的值，而之前它是“null”。

告诉我这是否成功。我想知道这是否只能以我的方式运作。

Answer 8

如果您不想添加禁用的attr，可以通过编程方式执行

可以使用以下代码将版本禁用到<select class="yourClass">元素中：

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

如果您想尝试，可以在此处查看：https://jsfiddle.net/9kjqjLyq/

如何使html <select>元素看起来像“禁用”，但传递值？</select>

8 个答案:

演示：http://jsfiddle.net/ZCSRq/