jquery - Jquery在复选框更改时禁用元素

Question

<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/

Answer 1

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

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

工作样本

阅读更多关于.prop()

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

.prop() 与 .attr()

Answer 2

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

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

.prop() 方法仅获取匹配集中第一个元素的属性值。它为尚未设置的属性的值返回 undefined，或者如果匹配的集合没有元素。要单独获取每个元素的值，请使用循环构造，例如 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>
​

Answer 3

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

Answer 4

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

属性通常会影响 DOM 元素的动态状态，而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性、输入和按钮的 disabled 属性或复选框的 checked 属性。.prop()应该使用方法来设置禁用和检查而不是方法.attr() 。该.val()方法应用于获取和设置值。

1 $( "输入" ).prop( "禁用", false );
2 $( "输入" ).prop("检查", true );
3 $("输入").val("someValue");

重要提示：.removeProp()不应使用该方法将这些属性设置为 false。移除原生属性后，将无法再次添加。有关.removeProp()更多信息，请参阅。