javascript - 即使有一个框未选中，如何禁用“允许”按钮？仅当选中所有复选框时才应启用“允许”按钮？

Question

仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮

<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”变量中给出 false