Question

选择单选按钮+ x复选框数量将出现错误。第一个实例是按钮1 + 5复选框，如果您单击第六个框，则会发出警报。

第二个功能是按钮2 + 10复选框，但这只会产生与按钮1相同的错误并停止单击10个框。

代码即时通讯使用：

$("input[name='option[]']").on('change', function (e) {
    if ($("input[name='meals']").val() == 5 && $("input[name='option[]']:checked").length > 5)  {
        $(this).prop('checked', false);
        alert("allowed only 5");
    }
    else if ($("input[name='meals']").val() == 10 && $("input[name='option[]']:checked").length > 10)  {
        $(this).prop('checked', false);
        alert("allowed only 10");
    }
    else if ($("input[name='meals']").val() == 15 && $("input[name='option[]']:checked").length > 15)  {
        $(this).prop('checked', false);
        alert("allowed only 15");
    }
    else if ($("input[name='meals']").val() == 20 && $("input[name='option[]']:checked").length > 20)  {
        $(this).prop('checked', false);
        alert("allowed only 20");
    }
});

任何帮助都会很棒！

非常感谢！

Answer 1

主要问题是因为您选择的是input[name='meals']元素，而不是所有被选中的元素。由于val()仅从集合的第一个元素（始终为5）中读取。

要解决此问题，您需要使用:checked选择器来获取所选数量的meals。您也可以通过在if条件中使用该值来使逻辑干燥。像这样：

$("input[name='option[]']").on('change', function(e) {
  var maxAllowed = parseInt($("input[name='meals']:checked").val(), 10);

  if ($("input[name='option[]']:checked").length > maxAllowed) {
    $(this).prop('checked', false);
    alert("allowed only " + maxAllowed);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type="radio" name="meals" value="5" checked="true" /> 5
</label><label>
  <input type="radio" name="meals" value="10" /> 10
</label><label>
  <input type="radio" name="meals" value="15" /> 15
</label><label>
  <input type="radio" name="meals" value="20" /> 20
</label><br /><br /><br />

<div>
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" /><br />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" /><br />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" /><br />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
  <input type="checkbox" name="option[]" />
</div>

jQuery停留在基于输入的1个功能上

1 个答案: