主页 / 问题 / 1091583
Accepted
Natalya
Asked:2020-03-06 22:05:55 +0000 UTC2020-03-06 22:05:55 +0000 UTC

如何引用具有特定值的集合元素？

  • 772
<div class="col">
 <div class="field undecided">
    <input id="opt" type="checkbox" value="no" />
    <label for="opt">no</label>
  </div>
  <div class="field">
    <input id="opt1" type="checkbox" value="cat" />
    <label for="opt1">cat</label>
  </div>
  <div class="field">
    <input id="opt2" type="checkbox" value="dog" />
    <label for="opt2">dog</label>
  </div>   
  <div class="field">
    <input id="opt3" type="checkbox" value="hamster" />
    <label for="opt3">hamster</label>
  </div>  
  <div class="field">
    <input id="opt4" type="checkbox" value="rat" />
    <label for="opt4">rat</label>
  </div> 
</div>  

$(':checkbox').click(function(){        
    if ($(this).is(':checked')) {
            if ($(this)[0].defaultValue === 'no') {
                $(this).parents('.col').find('.field').addClass('disabled-answer');
                //$(this)[0].val('no').removeClass('disabled-answer');
        $('.undecided').removeClass('disabled-answer');
            }
        }       
        else {$(this).parents('.col').find('.field').removeClass('disabled-answer');}
});

When "no" is selected, all options except "no" itself should become inactive. 在所有元素的点击活动中被禁用，然后“返回”为“否”。但是访问“否”的唯一方法是分配一个额外的未定类。它将它视为集合的一个元素（例如，$(this)[0].val('no')），就好像它是集合的所有元素一样。我想知道在这种情况下如何处理第二种方式是正确的。

https://jsfiddle.net/Nata_Hamster/sncwaL15/

javascript

1 个回答

  1. Best Answer

    如果一切都被正确理解，那么这里就是您问题的解决方案。

    执行阶段：

    1. 选择.col中包含的所有复选框
    2. 排除当前复选框
    3. 如果选中的复选框为“否”，则将所有其他元素设置为禁用，否则删除禁用

    选择任何复选框时，我们选择所有复选框的集合并排除当前复选框。

        $(':checkbox').click(function(){
           var n = $(this); 		
           n.closest('.col').find(':checkbox').not(n).prop('disabled', n.is(':checked') && n.val() === 'no');
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
 <div class="field undecided">
    <input id="opt" type="checkbox" value="no" />
    <label for="opt">no</label>
  </div>

  <div class="field">
    <input id="opt1" type="checkbox" value="cat" />
    <label for="opt1">cat</label>
  </div>  

  <div class="field">
    <input id="opt2" type="checkbox" value="dog" />
    <label for="opt2">dog</label>
  </div>   

  <div class="field">
    <input id="opt3" type="checkbox" value="hamster" />
    <label for="opt3">hamster</label>
  </div>   

  <div class="field">
    <input id="opt4" type="checkbox" value="rat" />
    <label for="opt4">rat</label>
  </div> 

</div>

    • 3

相关问题