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
        }
    })
})

此处每当选中或取消选中复选框时，它都会检查所有复选框类型输入，然后如果取消选中其中任何一个，则会在＆＃34; all_checked＆＃34;变量

Answer 2

在堆栈溢出中搜索的结果会更多，请参考其中一个结果

<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>

如果一个盒子未经检查，如何禁用ALLOW按钮？只有选中所有框时才应启用ALLOW按钮？

3 个答案: