多个复选框以启用/禁用javascript中的一个选择器

Posted 2023-05-08

【中文标题】多个复选框以启用/禁用javascript中的一个选择器

【英文标题】：multiple check boxes to enable/disable just one selector in javascript

【发布时间】：2021-10-30 12:31:08

【问题描述】：

我正在尝试使选择器可用，只有在选中一个或多个复选框时才可用。如果用户取消选中所有复选框，则选择器应返回禁用状态。

我试图从这个response 实现我的解决方案（它非常适合与任何其他选择器配对的一个复选框）；但是，当我这样实现时：

$(document).ready(function()
  var enable_sel = function()
    $("#pizza_kind").prop("disabled", !$(":checkbox").prop("checked"));
  ;

  enable_sel();
  $(":checkbox").change(enable_sel);

); 

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

<form>
  <input type="checkbox" id="p1" name="p1">
  <input type="checkbox" id="p2" name="p2">
  <input type="checkbox" id="p3" name="p3">

  <select name="pizza_kind" id="pizza_kind">
    <option>(choose one)</option>
    <option>"Hawaian"</option>
    <option>"Peperonni"</option>
    <option>"Another"</option>
  </select>
</form>

我禁用了选择器，但它似乎只对第一个复选框做出反应，而不是其余的复选框。

我无法在 javascript/html sn-p 中完成这项工作，不知道为什么。

我目前正在使用 Flask 和 jquery 3.6.0

我做错了什么？

【问题讨论】：

这能回答你的问题吗？ jQuery see if any or no checkboxes are selected

请注意，我认为您可能将“选择器”和“选择”混为一谈。我个人从未听说过 <select /> 元素被称为“选择器”，但我确实认为“选择器”是一种在 CSS 或 querySelector/querySelectorAll 中匹配元素的方式。不过，我想这可能会因学科或地区而有所不同。

@SvenEberth，我尝试了该答案中的两个主要解决方案，但无法使其正常工作，请参阅here 。再次，我不知道我是否搞砸了。 ..

@AlexanderNied，感谢您的快速响应。我正在从引导主题改编<select>，我认为这是正确的命名法，一直在使用它们没有任何问题，我正在使用Flask，并且选择一些选项，也许我的问题中的标题不正确。

【参考方案1】：

当你从一个集合中读取一个道具时，它只会选择第一个。它不会随机选择你想要的那个，所以你需要告诉它确切的选择。

所以选择选中的复选框并检查长度。为此，请在选择器中使用 :checked，它将选择选中的那些。

$(document).ready(function()
  var enable_sel = function()
    $("#pizza_kind").prop("disabled", !$(":checkbox:checked").length);
  ;

  enable_sel();
  $(":checkbox").change(enable_sel);

); 

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

<form>
  <input type="checkbox" id="p1" name="p1">
  <input type="checkbox" id="p2" name="p2">
  <input type="checkbox" id="p3" name="p3">

  <select name="pizza_kind" id="pizza_kind">
    <option>(choose one)</option>
    <option>"Hawaian"</option>
    <option>"Peperonni"</option>
    <option>"Another"</option>
  </select>
</form>

【讨论】：

是的，@epascarello，非常感谢！它有效！