Question 10679 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery: checking if any checkbox is checked only works on the first checkbox checked

confusing!

I have a grid with (hidden) checkboxes like this:

enter image description here

U see, some are selected, but not all.

I want my greyed out button at the bottom to become enabled (opacity = 1) when any of the checkboxes is eneblaed, and disabled when all are unchecked.
My code works but only with the first checkbox i pick when I start this process.
All checkboxes are from the class .checkbox.

Here is what I tried:

<script>
    $(".checkbox").change(function () {
        $('.checkbox').each(function (i, obj) {
            if (obj.checked) {
                $('.baseButton').prop("disabled", false);
                jQuery('.baseButton').css('opacity', '1');
            }
            else {
                // disable
                $('.baseButton').prop("disabled", true);
                jQuery('.baseButton').css('opacity', '0.2');
            }
        });       
    });
</script>

What am I trying?
I added a change handler to each checkbox, and when its fired, it is supposed to cycle through all checkboxes and check their state. If any is checked, enable the button, if non disable. but somehow it doesnt work.

Tags:

2

Answers


  1. 0

    Im not a JQuery guru but what if you implement it in the following way?

    $(document).ready(function() {
  // Get all checkboxes and the button
  var checkboxes = $('.checkbox');
  var button = $('.baseButton');

  // Disable the button at the start
  button.prop('disabled', true);
  button.css('opacity', '0.2');

  // Listen for changes on the checkboxes
  checkboxes.change(function() {
    var checked = false;
    checkboxes.each(function(i, checkbox) {
      if (checkbox.checked) {
        checked = true;
      }
    });

    // Enable or disable the button based on the checkboxes
    if (checked) {
      button.prop('disabled', false);
      button.css('opacity', '1');
    } else {
      button.prop('disabled', true);
      button.css('opacity', '0.2');
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" class="checkbox"> Checkbox 1</label><br>
<label><input type="checkbox" class="checkbox"> Checkbox 2</label><br>
<label><input type="checkbox" class="checkbox"> Checkbox 3</label><br>
<button class="baseButton" disabled>Submit</button>
    Login or Signup to reply.
  2. 0

    Almost. You’re looping through the checkboxes, but for each one you’re deciding whether to enable or disable the button. So the only one which actually results in enabling or disabling the button is the last checkbox, over-writing any changes made by previous iterations of the loop.

    You can track in a separate variable outside of the loop whether any of the checkboxes are checked, and then enable or disable after the loop based on that. For example:

    $(".checkbox").change(function () {
    let isChecked = false;

    $('.checkbox').each(function (i, obj) {
        if (obj.checked) {
            isChecked = true;
        }
    });

    if (isChecked) {
        $('.baseButton').prop("disabled", false);
        jQuery('.baseButton').css('opacity', '1');
    }
    else {
        // disable
        $('.baseButton').prop("disabled", true);
        jQuery('.baseButton').css('opacity', '0.2');
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<button class="baseButton" style="opacity:0.2;" disabled="true">button</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search