Question

小宝贝，我一直盯着/谷歌搜索这一小时，所以我觉得是时候向SO求助了。

基本上，我有一个在input复选框上运行的插件，每个复选框都嵌套在相应的label内。检查复选框应该会发生一些事情，但前提是父项label未被禁用。使用我的代码，它会执行所有复选框的操作，无论它们是否应该被禁用。

HTML：

<label class="btn btn-primary btn-lg bottom-margin-tiny opacity btn-block" >
    <input class="hidden" type="checkbox" name="chapters[]" value="3">
    <i class="fa fa-book"></i> &nbsp;Chapter 3 
</label>
<label class="btn btn-primary btn-lg bottom-margin-tiny opacity btn-block" disabled>
    <input class="hidden" type="checkbox" name="chapters[]" value="4">
    <i class="fa fa-book"></i> &nbsp;Chapter 4 
</label>

JS：

    var pluginDiv = this;   // Defined in my plugin, works fine
    var pluginCheckboxButtons = this.find("input[type='checkbox']").filter(function(){
        return !($(this).parent().prop("disabled"));
    });
    pluginCheckboxButtons.change(function() {
       // Does a thing
    });

Answer 1

将您的JS更改为：

var pluginDiv = this;   // Defined in my plugin, works fine
var pluginCheckboxButtons = pluginDiv
    .find('input:checkbox') // use :checkbox shorthand
        .filter(function(){
            return ! $(this).parent().is(':disabled');
        });

Answer 2

由于禁用不是label的默认属性，因此可以尝试更改

return !($(this).parent().prop("disabled"));

到

return !$(this).parent().is("[disabled]")

选择未禁用其父元素的输入元素

2 个答案: