使用 Dojo 检测是否所有复选框都未选中，禁用按钮

Question

我有一组复选框和一个“查询”按钮，因此用户可以检查一些内容并单击“查询”按钮以对 return 记录进行服务调用。如果选中 none 个复选框，如何禁用“查询”按钮？

下面是我写的代码。当我第一次取消选中所有这些时，QUERY 按钮被禁用。但是当我再次选中其中一个复选框时，数组 "unchecked" 变空了。请帮助！

      _bindChkChangeEvent: function(){
            var unchecked = []; 
            on(query('.chk'), 'change', lang.hitch(this, function(event) {
                if(!event.target.checked){
                    if(unchecked.indexOf(event.target.id) < 0)
                        unchecked.push(event.target.id);
                }
                else{
                    if(unchecked.indexOf(event.target.id) > -1)
                        unchecked.splice(event.target.id);
                }
 
                this._switchQueryBtn(unchecked); 
            }));
        },

        _switchQueryBtn: function(unchecked){
             if(unchecked.length == 10)
                    html.addClass(this.btnQuery, 'disabled');
             else
                    html.removeClass(this.btnQuery, 'disabled');
        },

Answer 1

在下面的link一个工作示例中，您可以尝试将这个概念应用到您的代码中（不幸的是，该问题仅包含部分代码视图）。

https://jsfiddle.net/zmh7bbrf/

脚本的作用：

以编程方式创建两个复选框。
以编程方式创建按钮。
为每个复选框添加事件处理程序 onChange。
函数showHideButton实际上包含显示或隐藏按钮的逻辑。
现在当页面加载时，两个复选框都未选中，showHideButton 运行s 和按钮被禁用。
当用户点击复选框时，重新运行函数showHideButton。
此时不满足条件，因为现在选中了一个复选框，所以重新启用按钮。

该脚本可以使用任意数量的复选框，只需添加它们的引用并修改 showHideButton 函数中的逻辑。

备注：您可以使用 dijit/registry 查找小部件的引用，而不是像原始问题中的代码那样使用 dojo/query 并直接查询 DOM。

有关 dijit/registry 的更多信息可在此处找到： https://dojotoolkit.org/reference-guide/1.10/dijit/registry.html

require(["dijit/form/CheckBox", "dijit/registry", "dijit/form/Button", "dojo/domReady!"], function(CheckBox, registry, Button) {
  new CheckBox({
    id: "checkBox0",
    name: "checkBox0",
    value: "option0",
    checked: false,
    onChange: function(event) {
      showHideButton();
    }
  }, "checkBox0").startup();
  new CheckBox({
    id: "checkBox1",
    name: "checkBox1",
    value: "option1",
    checked: false,
    onChange: function(event) {
      showHideButton();
    }
  }, "checkBox1").startup();
  new Button({
    label: "Click me!",
    onClick: function() {;
    }
  }, "button").startup();

  var showHideButton = function() {
    var checkBox0 = registry.byId('checkBox0'),
      checkBox1 = registry.byId('checkBox1'),
      button = registry.byId('button');
    if (!checkBox0.checked && !checkBox1.checked) {
      button.set('disabled', true);
    } else {
      button.set('disabled', false);
    }
  };
  showHideButton();

});

<input id="checkBox0" />
<label for="checkBox">Option 0</label>
<br>
<input id="checkBox1" />
<label for="checkBox">Option 1</label>
<br>
<button id="button" type="button"></button>

使用 Dojo 检测是否所有复选框都未选中，禁用按钮

use Dojo to detect if all checkboxes are unchecked, disable a button

javascript

checkbox

dojo

onchange