1つのボックスでもチェックが外されている場合、ALLOWボタンを無効にするにはどうすればよいですか？ ALLOWボタンは、すべてのボックスがチェックされている場合にのみ有効にする必要がありますか？

Question

[許可]ボタンは、すべてのチェックボックスがオンの場合にのみ無効にする必要があります。どうすればいいのですか？私は以下のようにHTML部分を完成させました。 ？それのロジックの一部を行うボタンが1つのボックスにチェックボックスがオンまたはオフ取得されるたびに、ここで

<form role="form" action="{{{basePath}}}/consent" method="post"> 

      <table style="width:100%; 
    border-collapse: collapse;"> 

    <tr style="border-collapse: collapse;"> 
    <td> <span> 
         <span style="color: #111;"><b>Open</b></span><span style="color: #0078bf;"><b>Bank</b></span> 
         </span></td><td>Account Information</td> 
    <td><input type="checkbox" name="information" value="info" checked></td> 



    </tr> 
    <tr style="border-collapse: collapse;"> 
    <td> <span> 
         <span style="color: #111;"><b>Open</b></span><span style="color: #0078bf;"><b>Bank</b></span> 
         </span></td> 
    <td>Account Balance</td> 
    <td><input type="checkbox" name="balance" value="bal" checked></td> 

    </tr> 
    <tr style="border-collapse: collapse;"> <td> <span> 
         <span style="color: #111;"><b>Open</b></span><span style="color: #0078bf;"><b>Bank</b></span> 
         </span></td> 
    <td>Account Transactions</td> 
    <td><input type="checkbox" name="transaction" value="trans" checked></td> 

    </tr> 
</table> 
      </div> 
      {{#if scopes}} 
      <!--<ul class="list-group"> 
       {{#each scopes}} 
       <li class="list-group-item">{{this}}</li> 
       {{/each}} 
      </ul>--> 
      <script type="text/javascript"> 
       $('#account-selector').change(function(){ 
        console.log(this.value); 
        //console.log(accounts[this.value].amount); 
       }) 
      </script> 
      <br><label style="margin-left:25%;" class="account-select">Please select an account</label><br> 
      <select style="width:100%;" class="dropbdown" id="account-selector" required name="account_number"> 
       <option selected="selected" disabled="disabled">--Select an Account--</option> 
       {{#each accounts}} 
        <option value="{{this.account_number}}">{{this.label}} ({{this.account_number}})</option> 
       {{/each}} 
      </select> 
      <br> 
      <span id="amount-balance"></span> 
      {{else}} 
      <h3>The application does not require any permissions.</h3> 
      {{/if}} 
      {{#if to}} 
      <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div>I agree to transfer <strong>{{amount}} GBP</strong> to account number: <strong>{{to}}</strong></div> 
      </div> 
      </div> 
      {{/if}} 
      {{#if tnc}} 
      <p>I agree to the <a href="{{tnc}}" class="tnc-link" target="_blank">Terms and conditions</a></p> 
      {{/if}} 
      <br><p>By clicking <strong>Allow</strong>, you will allow <strong>Accenture AISP</strong> and <strong>OpenBank</strong> to use your information in accordance with their respective terms of service and privacy policy for 90 days. 
      </p> 
      <div class="consent-button"> 
       <button type="submit" name="allow" value="allow" class="btn btn-primary grass-btn" style="width:48%">Allow</button> 
       <button type="submit" name="deny" value="deny" class="btn btn-primary grass-btn" style="width:48%">Cancel</button> 
      </div> 
      </form> 

Answer 1

$(document).ready(function() { 

    $(":checkbox").change(function() { 
     debugger; 
     var all_checked; 
     $(":checkbox").each(function() { 
      if (this.checked) { 
       all_checked = true; 
      } 
      else { 
       all_checked = false; 
       return false; 
      } 
     }) 
     if(all_checked) 
     { 
      //enable your button here 
     } 
     else 
     { 
      //disable your button here 
     } 
    }) 
}) 

それはその後、もし、すべてのチェックボックス型の入力をチェックしますがチェックされていても無効にする必要があります許可する方法それらのいずれかは、それが変数「all_checked」で偽与えるオフになっている

Answer 2

スタックオーバーフローで検索it.hereに結果

のいずれかを指すためのより多くの結果があること

<input type="button" class="check" value="Check All" />&nbsp; 
<input type="button" class="delete" value="allow" disabled /> 
<br/> 
<input type="checkbox" class="cb-element" value="1" />Checkbox 1 
<br/> 
<input type="checkbox" class="cb-element" value="2" />Checkbox 2 
<br/> 
<input type="checkbox" class="cb-element" value="3" />Checkbox 3 
<br/> 

$('.check:button').click(function() { 
    var checked = !$(this).data('checked'); 
    $('input:checkbox').prop('checked', checked); 
    $('.delete:button').prop('disabled', !checked) 
    $(this).data('checked', checked); 
    if (checked == true) { 
     $(this).val('Uncheck All'); 
    } else if (checked == false) { 
     $(this).val('Check All'); 
    } 
}); 

$('input:checkbox').change(function() { 
    $('.delete:button').prop('disabled', $('input:checkbox:checked').length < 3) 
}) 

$('.delete:button').click(function() { 
    var array = $('input:checkbox:checked').map(function() { 
     return this.value 
    }).get(); 
    console.log(array, array.join()) 
}) 

Answer 3

これはあなたのために

 <html> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 

      $(":checkbox").change(function() { 
       debugger; 
       var all_checked; 
       $(":checkbox").each(function() { 
        if (this.checked) { 
         all_checked = true; 
        } 
        else { 
         all_checked = false; 
         return false; 
        } 
       }) 
       if (all_checked) { 
        //enable your button here 
        $("#bttn_submit").prop("disabled", false) 
       } 
       else { 
        //disable your button here 
        $("#bttn_submit").prop("disabled", "disabled") 
       } 
      }) 
     }) 
    </script> 
    <form action="/action_page.php" method="get"> 
     <input type="checkbox" name="vehicle" value="Bike" checked> I have a bike<br> 
     <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br> 
     <input id="bttn_submit" type="submit" value="Submit"> 
    </form> 
    </html>