jQuery 选择器或“如果”麻烦答案

【问题标题】：jQuery Selectors or 'if' troublejQuery 选择器或“如果”麻烦
【发布时间】：2020-07-01 22:13:27
【问题描述】：

此代码应禁止单击总共两个以上的单选按钮（此类按钮共有三组）。

这在没有容器'label'的情况下有效，但是当它存在时，它不起作用（看起来'if'构造不起作用; 在它之外写的所有东西都可以正常工作）

如何在不去掉标签的情况下让它工作？有什么解决办法吗？

var radio_limit = 2;

$('.pricing-levels-3 label input').on('change', function(evt) {

   if($(this).siblings(':checked').length >= radio_limit) {
       this.checked = false;
   };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pricing-levels-3">
         <p><strong>Select 2 Levels</strong></p>
         <label>
           <input type="radio" name="vehicle" value="1">Level 1<br>
           <input type="radio" name="vehicle" value="2">Level 2<br>
           <input type="radio" name="vehicle" value="3">Level 3<br>
         </label>
         <label>
           <br>
           <input type="radio" name="vehicle2" value="1">Level 1<br>
           <input type="radio" name="vehicle2" value="2">Level 2<br>
           <input type="radio" name="vehicle2" value="3">Level 3<br>
         </label>
         <label>
           <br>
           <input type="radio" name="vehicle3" value="1">Level 1<br>
           <input type="radio" name="vehicle3" value="2">Level 2<br>
           <input type="radio" name="vehicle3" value="3">Level 3<br>
           <br>
         </label>
</div>

【问题讨论】：

HTML 无效，因为标签只能包含一个后代

标签： javascript jquery if-statement jquery-selectors

【解决方案1】：

您正在寻找没有标签的兄弟姐妹。现在有了标签，他们不是兄弟姐妹，他们是堂兄弟。为了解决这个问题，我们使用最接近（）读取同一 div 中的所有单选按钮。还可以使用 prop 检查单选按钮。这样做：

var radio_limit = 2;

$('.pricing-levels-3 label input').on('change', function(evt) {

   if($(this).closest('div').find('input:checked').length >= radio_limit) {
       $(this).prop('checked', false);
   };
});

【讨论】：