2016-07-06 13 views
1

チェック・ボックスのグループとQUERYボタンがありますので、QUERYボタンをクリックしてレコードを戻します。どのチェックボックスもチェックされていない場合、QUERYボタンを無効にするには?Dojoを使用してすべてのチェック・ボックスがチェックされていないかどうかを検出するには、ボタンを無効にします。

以下は私が書いたコードです。最初にQUERYボタンをすべてオフにすると、QUERYボタンが無効になりました。しかし、チェックボックスの1つだけをもう一度チェックすると、配列 "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'); 
 
     },
次のリンクで

+0

が働いた:unchecked.splice(event.target.idを)。 unchecked.splice(unchecked.indexOf(event.target.id)、1);にチェックします。あなたの応答に感謝します。 –

答えて

1

実施例は、あなたがあなたのコードに、この概念を採用しようとすることができます(残念ながら、質問には部分的にしかコードビューが含まれています)。

https://jsfiddle.net/zmh7bbrf/

スクリプトは何:

  • は、プログラムの2つのチェックボックスを作成します。
  • プログラムでボタンを作成します。
  • 各チェックボックスにイベントハンドラonChangeを追加します。
  • ファンクションshowHideButtonには、実際にボタンを表示または非表示にするロジックが含まれています。
  • ページロード時に両方のチェックボックスがオフの場合、showHideButtonが実行され、ボタンが無効になっています。
  • ユーザーがチェックボックスをクリックすると、機能showHideButtonを再実行します。
  • この時点では、1つのチェックボックスがオンになっているため、条件が満たされていないため、ボタンを再度有効にしてください。

このスクリプトは任意の数のチェックボックスで機能し、参照を追加して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> 
+0

私はあなたのコードのアイデアを見ます。しかし、私の場合は、チェックボックスを数十種類用意しています。クラスによってチェックボックスを照会し、それらをループするのは簡単です。 –

+0

@AlexW私はあなたの要点を理解しています。あるいは、registry.toArray()を使用してすべてのウィジェットをループし、チェックされたチェックボックスだけを選択してそこにロジックを適用することができます。 – GibboK

関連する問題