jquery - 排除嵌套子项

Question

以下脚本使用 for:x 启用/禁用其嵌套表单控件。类(class)名称。问题是嵌套的 for:y元素在不应该启用的时候被启用。仅当嵌套 for:y 时才应启用它们。已启用。

有人可以为我提供一个额外的过滤器来排除嵌套 for:* 内的表单元素吗？类？

换句话说，给出下面的示例，当 losssold 时检查后 for:losssold 的所有子输入应该启用除 for:has-buy-sell-agreementtrue 内的子元素之外的元素如果has-buy-sell-agreementtrue也没有被检查。

所以我认为排除 for:has-buy-sell-agreementtrue 中的这些元素会更容易.

<script type="text/javascript">
$('[class*="for:"]').each(function(){
   var klass=$(this).attr('class'),element;
   var that = this;
   $.each(klass.split(' '),function(index,value){
       if(!value)return;
       if (value.substr(0,4)=='for:')
           element=value.substr(4);
   });
   $('[name="' + $('#'+element).attr('name') + '"]')
       .click(function(){
           $(that).toggleClass('disabled', !$('#'+element).is(':checked'))
               .find('input,select,textarea') /* insert edge case here */
               .each(function(){
                   if ($('#'+element).is(':checked'))
                      $(this).removeAttr('disabled');
                   else
                       $(this).attr('disabled','disabled');
               });
       })
       .trigger('click');
});
</script>

  <li>What would you like to see happen to your business when you (or a co-owner) die, become disabled, or retire? <br/>
    <ul><li><label><input type="radio" name="loss" id="losssold" value="sold"/> Sold to other Owners/another Business</label>
        <ul class="for:losssold">
          <li>Do you have a buy-sell agreement?<br/>
            <label><input type="radio" name="has-buy-sell-agreement" id="has-buy-sell-agreementtrue" value="true"/> Yes</label> 
            <label><input type="radio" name="has-buy-sell-agreement" id="has-buy-sell-agreementfalse" value="false"/> No</label><br/>
            <ol class="for:has-buy-sell-agreementtrue"> <!-- nested for class; inner elements shouldn't be affected -->
              <li><label for="buy-sell-last-updated">When was the agreement last updated?</label><br/>
                <input type="text" name="buy-sell-last-updated" id="buy-sell-last-updated" value=""/>
              </li>
              <li>Is the agreement funded?<br/>
                <label><input type="radio" name="buy-sell-is-funded" id="buy-sell-is-fundedtrue" value="true"/> Yes</label> 
                <label><input type="radio" name="buy-sell-is-funded" id="buy-sell-is-fundedfalse" value="false"/> No</label>
              </li>
            </ol>
          </li>
        </ul>
      </li>
    </ul>
  </li>

Answer 1

filter 函数非常适合删除与表达式不匹配的项目，因此您可以更改此设置:

.find('input,select,textarea') 

进入这个？

.find('input,select,textarea')
    .filter(function() {
        // return false to remove an element from the set
        return $(this)
                .closest('[class^="for\\:"]')
                .hasClass('for:' + element);
    })

这个想法是删除任何输入、选择或文本区域，这些输入、选择或文本区域具有最接近的父级而不是您所需的父级。

另请注意，我在选择器中对您的 : 字符进行了两次转义。 : 是一个在类名中使用的不常见字符，因为它暗示“伪”选择器，并且还会导致 jquery 出错(除非你转义它，就像我上面所说的那样)。

祝你好运!

<小时/> 编辑

啊，是的，我们希望禁用通过嵌套的“for:”div向下传播，但不启用......我们可以修改它如下通过移动过滤。 (过滤器已移至单独的函数以使其更具可读性。)

.find('input,select,textarea')
.each(function() {
    if ($('#'+element).is(':checked')) {
        if (isDirectDescendant(this, element)) {
            $(this).removeAttr('disabled');
        }
    }
    else {
        $(this).attr('disabled','disabled');
    }
 });

function isDirectDescendant(e, element) {
     return $(e)
            .closest('[class^="for\\:"]')
            .hasClass('for:' + element);
}