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

【问题标题】：Selecting input elements whose parent elements are not disabled选择其父元素未被禁用的输入元素
【发布时间】：2014-08-23 10:25:43
【问题描述】：

Whelp，我已经盯着/谷歌搜索了一个小时，所以我想是时候向 SO 寻求帮助了。

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

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
    });

【问题讨论】：

我认为<label> 元素没有disabled 属性（当然不是有效的disabled 属性）。

标签： javascript jquery twitter-bootstrap checkbox

【解决方案1】：

由于 disabled 不是label 的默认属性，不妨尝试更改

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

到

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

【讨论】：

做到了！没有意识到 label 不应该具有 default 属性。将它们设为buttons 而不是labels 是否更有意义？
不，除非您将复选框移到更改的父级之外，因为交互式元素不能有交互式子元素。
在 HTML5 中，您可以使用以data- 开头的属性将“数据”添加到任何 DOM 元素。一种方法是<label data-disabled="true" >。或者，您可以在标签中添加一个类 disabled 并说 .is(".disabled")。
@Ninsly 问题是我仍然需要添加 disabled 属性，以便 Bootstrap 应用正确的样式：-/ 添加额外的类/属性使其不那么优雅。
我一直在查看 all their documentation 并且找不到引导程序在标签中支持 disabled 属性的位置。我可能会忽略它，但似乎他们使用类。您确定添加 disabled 类并删除 disabled 属性不会同时设置它的样式吗？

【解决方案2】：

把你的 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');
        });

【讨论】：