使用Dojo檢測是否所有複選框都未選中，禁用按鈕

我有一組複選框和一個QUERY按鈕，因此用戶可以檢查幾件事情並單擊QUERY按鈕進行服務調用以返回記錄。如果沒有選中任何複選框，如何禁用QUERY按鈕？使用Dojo檢測是否所有複選框都未選中，禁用按鈕

下面是我寫的代碼。當我第一次取消選中所有這些時，QUERY按鈕被禁用。但是當我再次選中一個複選框時，數組「未選中」變爲空。請幫忙！

 _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'); 
 
     },

來源

2016-07-06 Alex W.

工作後，我做了如下修改：unchecked.splice（event.target.id）; unchecked.splice（unchecked.indexOf（event.target.id），1）; –

在下面的鏈接工作的例子，你可以嘗試採用這種概念，你的代碼（不幸的是，問題只包含部分代碼視圖）。

https://jsfiddle.net/zmh7bbrf/

腳本的作用：

編程創建兩個複選框。
以編程方式創建按鈕。
爲每個複選框添加事件處理程序onChange。
功能showHideButton實際上包含顯示或隱藏按鈕的邏輯。
現在，當頁面加載時，兩個複選框均未選中，showHideButton運行並且按鈕被禁用。
當用戶點擊一個複選框時，重新運行功能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>

來源

2016-07-06 17:15:05 GibboK

感謝您的回覆。我看到了你的代碼的想法。但就我而言，我有十幾個複選框，按類查詢複選框，然後通過它們循環看起來更容易。 –

@AlexW我明白你的觀點，或者你可以使用registry.toArray（）循環思考你所有的小部件，只選擇複選框檢查並在那裏應用你的邏輯。 – GibboK

使用Dojo檢測是否所有複選框都未選中，禁用按鈕

回答

相關問題