Jquery在复选框更改时禁用元素答案

【问题标题】：Jquery disable element on checkbox changeJquery在复选框更改时禁用元素
【发布时间】：2016-08-26 20:31:39
【问题描述】：

<input type="checkbox" id="dw"/>

<select id="oo">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

$('#dw').change(function() {
    if ($(this).is(':checked')) {
        $('#oo').removeAttr('disabled');
    } else {
        $('#oo').attr('disabled', true);
    }
}

我看不出错误在哪里。

http://jsfiddle.net/f8jGU/

【问题讨论】：

只需使用$('#dw').on('change', function() {

标签： jquery select checkbox

【解决方案1】：

工作演示 http://jsfiddle.net/2gbHQ/5/

好读 http://api.jquery.com/prop/

.prop() 方法只获取第一个元素的属性值在匹配的集合中。它返回未定义的属性值尚未设置，或者匹配的集合没有元素。要得到每个元素的值单独使用，使用循环构造，例如作为 jQuery 的 .each() 或 .map() 方法。

jQuery 代码

$('#dw').change(function() {
    if ($(this).is(':checked')) {
        $('#oo').prop('disabled', false);
    } else {
        $('#oo').prop('disabled', true);
    }
});

HTML

<input type="checkbox" id="dw" />

<select id="oo" disabled="true">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

【讨论】：

【解决方案2】：

$('#dw').on('change', function() {

    // If this.checked = true, then select will enabled else disabled
    // instead of attr() use prop()
    $('#oo').prop('disabled', !this.checked);
});

Working sample

了解更多关于 .prop()

您可以从以下链接获得巨大收益：

.prop() vs .attr()

【讨论】：

【解决方案3】：

您的代码也可以工作，只是您错过了关闭change 函数。请看更新的小提琴http://jsfiddle.net/f8jGU/1/

【讨论】：

【解决方案4】：

.prop() (https://api.jquery.com/prop/) 的 jQuery 文档中解释了您的代码不起作用的原因：

属性通常会影响 DOM 元素的动态状态，而无需更改序列化的 HTML 属性。示例包括值输入元素的属性，输入的禁用属性和按钮，或复选框的选中属性。 .prop() 方法应该用于设置禁用和检查而不是.attr() 方法。 .val() 方法应该用于获取和设置价值。
1 $( "输入" ).prop( "禁用", false ); 2 $( "输入" ).prop("检查", true ); 3 $("输入").val("someValue");
重要提示：不应使用 .removeProp() 方法将这些属性设置为 false。原生属性一旦被移除，就不能再次添加。请参阅.removeProp() 了解更多信息。

【讨论】：