использовать Dojo, чтобы определить, сняты ли все флажки, отключить кнопку

Question

У меня есть группа флажков и кнопка QUERY, чтобы пользователь мог проверить несколько вещей и нажать кнопку QUERY, чтобы сделать служебный вызов для возврата записей. Как отключить кнопку QUERY, если ни один из флажков не установлен?

Ниже приведены коды, которые я написал. Кнопка 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

На следующей ссылке рабочий пример, вы можете попытаться принять эту концепцию в код (к сожалению, вопрос содержит лишь частичное представление кода).

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>