Multiple checkbox with button

What I’m trying to do is like selecting topics what the user likes before it proceeds using the next button but the problem is I don’t have any idea on how will I do it with the multiple checkbox. It’s like the button is disable at first then it will be enable after the user pick their like topics but all I can do as of now is for just one checkbox. Here are some of the codes that I’m doing, I’m sorry but I only just starting in jquery. Thanks in advance.

HTML

<a href="search.html"><input type="submit" value="Next" id="next" disabled="disabled"></a>

<ul>
  <li>
    <input class="checkbox" type="checkbox" id="chkPlant1" unchecked="checked"/>
    <label for="chkPlant1"><img src="img/plant1.jpg" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant2" />
    <label for="chkPlant2"><img src="img/plant2.jpg" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant3" />
    <label for="chkPlant3"><img src="img/plant3.png" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant4" />
    <label for="chkPlant4"><img src="img/plant4.jpg" /></label>
  </li>
</ul>
<script type="text/javascript">
    
    $(function () {
      $("#chkPlant1").change(function () {
        if($('#chkPlant1').is(':checked')) { 
          $("#next").prop("disabled", false);
        }
        else {
          $("#next").prop("disabled", true);
        }
    });
  });

  </script>

33 thoughts on “Multiple checkbox with button”

  1. Use :checked pseudo-selector with length property as it shown below:

    $(function() {
    
      function updateView() {
        // count of all checked inputs with class .checkbox
        if ($("input.checkbox:checked").length > 0) { 
          $("#next").prop("disabled", false);
        } else {
          $("#next").prop("disabled", true);
        }
      }
    
      // match all inputs with class .checkbox
      $("input.checkbox").change(function(event) {
        updateView();
      });
    
      // initialize
      updateView();
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <a href="search.html"><input type="submit" value="Next" id="next"></a>
    <ul>
      <li><input class="checkbox" type="checkbox" id="chkPlant1" /></li>
      <li><input class="checkbox" type="checkbox" id="chkPlant2" /></li>
      <li><input class="checkbox" type="checkbox" id="chkPlant3" /></li>
      <li><input class="checkbox" type="checkbox" id="chkPlant4" /></li>
    </ul>
    Reply
  2. I hope this could help, if you don’t want to use the class

    <script type="text/javascript">
    
    $(function () {
      $("#chkPlant1").change(function () {
        if($('#chkPlant1').is(':checked')) { 
          $("#next").prop("disabled", false);
        }
        else {
          $("#next").prop("disabled", true);
        }
       });
      $("#chkPlant2").change(function () {
        if($('#chkPlant2').is(':checked')) { 
          $("#next").prop("disabled", false);
        }
        else {
          $("#next").prop("disabled", true);
        }
    });
     $...
    });
    
    </script>
    
    Reply
  3. Target any input with class input.checkbox and not just the first one and check inside if any of them is checked, this will make sure at least one is picked.

    $("input.checkbox").change(function() {
        if ($("input.checkbox").is(':checked')) {
    
    $(function() {
      $("input.checkbox").change(function() {
        if ($("input.checkbox").is(':checked')) {
          $("#next").prop("disabled", false);
        } else {
          $("#next").prop("disabled", true);
        }
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a href="search.html"><input type="submit" value="Next" id="next" disabled="disabled"></a>
    
    <ul>
      <li>
        <input class="checkbox" type="checkbox" id="chkPlant1" unchecked="checked" />
        <label for="chkPlant1"><img src="img/plant1.jpg" /></label>
      </li>
    
      <li>
        <input class="checkbox" type="checkbox" id="chkPlant2" />
        <label for="chkPlant2"><img src="img/plant2.jpg" /></label>
      </li>
    
      <li>
        <input class="checkbox" type="checkbox" id="chkPlant3" />
        <label for="chkPlant3"><img src="img/plant3.png" /></label>
      </li>
    
      <li>
        <input class="checkbox" type="checkbox" id="chkPlant4" />
        <label for="chkPlant4"><img src="img/plant4.jpg" /></label>
      </li>
    </ul>
    Reply

Leave a Comment