在JavaScript中使用多个复选框来启用/禁用一个选择器。

21 浏览
0 Comments

在JavaScript中使用多个复选框来启用/禁用一个选择器。

我正在尝试只有在勾选了一个或多个复选框时才可用选择器。如果用户取消勾选所有复选框，则选择器应重新禁用。\n我尝试实现这个解决方案（对于一个与任何其他选择器配对的复选框，它工作得很完美）；然而，当我像这样实现它时：\n

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

\n

\n选择器被禁用了，但似乎只对第一个复选框有反应，而不是其他复选框。\n我无法使这段JavaScript/HTML片段工作，不知道为什么。\n我目前正在使用Flask和jquery 3.6.0。\n我做错了什么？

0

1 答案

0 Comments

在上面的代码中，有一个表单包含多个复选框和一个下拉选择框。问题是，只有当至少一个复选框被选中时，下拉选择框才能被启用，否则将被禁用。

解决这个问题的方法是使用JavaScript和jQuery库。代码的核心部分是一个名为`enable_sel`的函数。该函数通过使用`:checked`选择器来检查被选中的复选框的数量，并根据数量来启用或禁用下拉选择框。在页面加载完成后，`enable_sel`函数会被调用一次来初始化下拉选择框的状态，并且当复选框的状态发生改变时，`enable_sel`函数也会被调用来更新下拉选择框的状态。

下面是完整的代码：

当页面加载完成时，`enable_sel`函数会被调用一次来检查复选框的状态并更新下拉选择框的状态。然后，当任何一个复选框的状态发生改变时，`enable_sel`函数会再次被调用来更新下拉选择框的状态。

通过这种方式，只有当至少一个复选框被选中时，下拉选择框才会被启用，否则它将被禁用。这个解决方案使用了jQuery库中的选择器和属性操作方法，使得代码更加简洁和易于理解。

0