jquery - jQuery :not() 选择器嵌套

Question

我有这个 HTML 标记：

<div>
    <ul>
        <li>
            <div id="FieldWrap18" class="fieldSettings full" data-dependent="{19}" data-dependson="">
                <input id="Field_0_18" name="Field_0_18" type="checkbox" value="true">
                <input name="Field_0_18" type="hidden" value="false">
                Yes
            </div>
        </li>
        <li>
            <div id="FieldWrap19" class="fieldSettings full" data-dependent="" data-dependson="">
                <input id="Field_0_19" name="Field_0_19" type="checkbox" value="true">
                <input name="Field_0_19" type="hidden" value="false">
                No
            </div>
        </li>
    </ul>
</div>

我正在尝试使用此选择器选择“是”字段（我必须使用该data-dependent属性）

$('div:not([data-dependent=""]) input:not([type="hidden"])').on('change', function () {
    alert('Yep!');
});

但是，它选择了两个input字段。我如何只选择non-empty data-dependent non-hidden input？这是一个带有非工作代码的jsFiddle 。我知道选择器由于父级div甚至没有data-dependent属性而中断，但我不知道如何构造我的选择器以在抓取具有该属性的那个时忽略该 div。谢谢你的帮助。

Answer 1

试试这个选择器：-

演示

  $(document).ready(function () {
     $('div[data-dependent]')
      .not('[data-dependent=""]')
      .find('input:not([type="hidden"])')
      .on('change', function () {
        alert('Yep!');
    });
 });

Answer 2

这是您可以做到的一种方法。

   $('input[type="checkbox"]').on('change', function () {
     var parent = $(this).parent();
     if(parent.data().dependent.length > 0)
         alert('you clicked YES!');
     else
          alert('you clicked NO!');
});

这是jsfiddle工作。