191

我想以类似的形式创建一个选项

[] I would like to order a [selectbox with pizza] pizza

其中选择框仅在选中复选框时启用，在未选中时禁用。

我想出了这段代码：

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

我尝试了各种方法，如何使用.prop()、.attr()和设置禁用属性.disabled=。然而，什么也没有发生。当应用于 a<input type="checkbox">而不是 时<select>，代码可以完美运行。

如何<select>使用 jQuery 禁用/启用？

4

8 回答 8

325

您想使用这样的代码：

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
</script>

这是工作示例

于 2012-05-13T07:55:22.887 回答
129

为了能够禁用/启用选择，首先您的选择需要一个 ID 或类。然后你可以做这样的事情：

禁用：

$('#id').attr('disabled', 'disabled');

使能够：

$('#id').removeAttr('disabled');
于 2012-05-13T07:49:59.173 回答
27

Disabled 是WHATWG所述的选择元素的布尔属性，这意味着使用 jQuery禁用的正确方法是

jQuery("#selectId").attr('disabled',true);

这将使这个 HTML

<select id="selectId" name="gender" disabled="disabled">
    <option value="-1">--Select a Gender--</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
</select>

这适用于XHTML 和 HTML（W3School 参考）

然而，它也可以使用它作为属性来完成

jQuery("#selectId").prop('disabled', 'disabled');

得到

<select id="selectId" name="gender" disabled>

仅适用于 HTML 而不是 XTML

注意：禁用的元素将不会与此问题中回答的表单一起提交：禁用的表单元素未提交

注意2：禁用的元素可能会显示为灰色。

注3：

禁用的表单控件必须防止在用户交互任务源上排队的任何单击事件在元素上分派。

TL;博士

<script>
    var update_pizza = function () {
        if ($("#pizza").is(":checked")) {
            $('#pizza_kind').attr('disabled', false);
        } else {
            $('#pizza_kind').attr('disabled', true);
        }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
</script>
于 2015-03-25T19:37:51.557 回答
16

只需简单地使用：

var update_pizza = function () {
     $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked'));
};

update_pizza();
$("#pizza").change(update_pizza);

演示 ​</p>

于 2012-05-13T07:51:30.820 回答
9

使用以下内容：

$("select").attr("disabled", "disabled");

或者简单地添加id="pizza_kind"到<select>标签，比如<select name="pizza_kind" id="pizza_kind">：jsfiddle link

您的代码不起作用的原因仅仅是因为$("#pizza_kind")没有选择<select>元素，因为它没有id="pizza_kind".

编辑：实际上，更好的选择器是$("select[name='pizza_kind']")：jsfiddle link

于 2012-05-13T07:47:19.673 回答
8

很抱歉在旧线程中回答，但我的代码将来可能会帮助其他人。我在相同的情况下，当复选框将被选中时，很少有选定的输入字段将启用其他明智的禁用。

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});
于 2015-02-11T09:08:13.417 回答
5

你select没有身份证，只有名字。您需要修改选择器：

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

演示：http: //jsbin.com/imokuj/2/edit

于 2012-05-13T07:56:29.837 回答
2

好问题 - 我认为实现这一目标的唯一方法是过滤选择中的项目。
你可以通过一个 jquery 插件来做到这一点。检查以下链接，它描述了如何实现类似于您需要的东西。感谢
jQuery 禁用基于 Radio 选择的 SELECT 选项（需要所有浏览器的支持）

于 2012-05-13T07:45:31.250 回答