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 时忽略该 div。感谢您的帮助。

Answer 1

试试这个选择器：-

Demo

  $(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 工作。