Question

我正在尝试创建一个简单的应用程序，只有在选中所有复选框时才启用提交按钮。基于对this问题的回答，我编写了以下代码。但无法让它发挥作用。

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
         $(document).ready(function (){
         validate();
         $('#cond1, #cond2, #cond3').change(validate);
         });

            function validate(){
             if ($('#cond1').val().length   >   0   &&
                 $('#cond2').val().length  >   0   &&
                 $('#cond3').val().length    >   0) {
                 $('#subbtn').prop("disabled", false);
             }
             else {
                $('#subbtn').prop("disabled", true);
             }
            }

      </script>
   </head>
   <body>
      <h2>Welcome</h2>
      <h3>Please make sure that all the items are checked to enable proceed button</h3>
      <form action="welcome.php" method="post">
         <table align="center">
            <tr>
               <td>
                  v1
               </td>
               <td>
                  <h2><input type="checkbox" id="cond1" name="cond1" value="checked"  ></h2>
               </td>
            </tr>
            <tr>
               <td>
                  v2
               </td>
               <td>
                  <input type="checkbox" id="cond2" name="cond2" value="checked"  >
               </td>
            </tr>
            <tr>
               <td>
                  v3
               </td>
               <td>
                  <input type="checkbox" id="cond3" name="cond3" value="checked" >
               </td>
            </tr>
            <tr>
               <td style="text-align: center">
                  <input type="submit" value="Proceed" id="subbtn" name="subbtn" >
               </td>
            </tr>
         </table>
      </form>
   </body>
</html>

Answer 1

仅当选中了所有复选框时，

才会启用提交按钮。

您需要使用:checked选择器和.is()

function validate() {
    if ($('#cond1').is(':checked') &&
        $('#cond2').is(':checked') &&
        $('#cond3').is(':checked') ) {
        $('#subbtn').prop("disabled", false);
    } else {
        $('#subbtn').prop("disabled", true);
    }
}

＆＃13;

$(document).ready(function() {
  validate();
  $('#cond1, #cond2, #cond3').change(validate);
});

function validate() {
  if ($('#cond1').is(':checked') &&
    $('#cond2').is(':checked') &&
    $('#cond3').is(':checked')) {
    $('#subbtn').prop("disabled", false);
  } else {
    $('#subbtn').prop("disabled", true);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Welcome</h2>
<h3>Please make sure that all the items are checked to enable proceed button</h3>
<form action="welcome.php" method="post">
  <table align="center">
    <tr>
      <td>
        v1
      </td>
      <td>
        <h2><input type="checkbox" id="cond1" name="cond1" value="checked"  ></h2>
      </td>
    </tr>
    <tr>
      <td>
        v2
      </td>
      <td>
        <input type="checkbox" id="cond2" name="cond2" value="checked">
      </td>
    </tr>
    <tr>
      <td>
        v3
      </td>
      <td>
        <input type="checkbox" id="cond3" name="cond3" value="checked">
      </td>
    </tr>
    <tr>
      <td style="text-align: center">
        <input type="submit" value="Proceed" id="subbtn" name="subbtn">
      </td>
    </tr>
  </table>
</form>

＆＃13;

如何根据清单确认启用提交按钮？

1 个答案: