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

Why isn’t checkbox updating when ‘No’ clicked on modal using jQuery?

I am trying to uncheck input checkbox in jquery when i click No button of modal box and check it I click Yes button .

$('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
      if ($(this).is(':checked')) {
        var $n = noty({
          text: 'Please provide relevant complementary information about .....',
          modal: true,
          layout: 'center',
          type: 'neutral',
          buttons: [{
            addClass: 'btn btn-default',
            text: 'Ok',
            onClick: function($noty) {
              $(this).prop("checked","checked");
              $noty.close();
            }
          },
           {
             addClass: 'btn btn-default',
             text: 'No',
             onClick: function ($noty) {
                $(this).removeAttr('checked');
                $noty.close();
              }
            }]
        });
        // Focus on "OK" button
        $n.$buttons.find('#button-0').first().focus();
        return false;
      }
    });

I can see in developer tool the checked is added(checked = "checked") when clicking yes and hidden when clicking no, but in the UI the checking mark is not updating.

I tried $(this).prop("checked","checked");
and $(this).prop("checked",true);
and also $(this).attr("checked",true);
in Yes button, but without success .

Tags:

2

Answers


  1. 0

    To uncheck an input checkbox using jQuery, you can use the prop() function and set the checked property to false. Here’s the updated code for the "Yes" button click handler:

    {
  addClass: 'btn btn-default',
  text: 'Yes',
  onClick: function ($noty) {
    $(this).prop("checked", false); // Uncheck the checkbox
    $noty.close();
  }
}

    By setting $(this).prop("checked", false), you are unchecking the checkbox associated with the current context.

    Make sure that the $(this) refers to the correct element in your context. If not, you might need to store the reference to the checkbox element in a variable and use that variable within the button click handler.

    Similarly, for the "No" button, you don’t need to remove the checked attribute. Instead, set the checked property to true to check the checkbox. Here’s the updated code:

    {
  addClass: 'btn btn-default',
  text: 'No',
  onClick: function ($noty) {
    $(this).prop("checked", true); // Check the checkbox
    $noty.close();
  }
}

    By making these changes, the checkbox should update its checked state in the UI when you click the "Yes" or "No" button within the modal box.

    Login or Signup to reply.
  2. 0

    This code work for your case

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Checkbox and Modal Box</title>
</head>
<body>
  <div class="container">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="techOptions" value="8" id="techCheckbox">
      <label class="form-check-label" for="techCheckbox">
        Tech Option
      </label>
    </div>

    <!-- Modal Box -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <p>Please provide relevant complementary information about .....</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="modal-ok">Yes</button>
            <button type="button" class="btn btn-secondary" id="modal-no">No</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
        if ($(this).is(':checked')) {
          var $checkbox = $(this); // Store the checkbox element in a variable

          $('#myModal').modal('show'); // Show the modal box

          // Handle "Yes" button click
          $('#modal-ok').on('click', function() {
            $checkbox.prop("checked", true); // Check the checkbox
            $('#myModal').modal('hide'); // Hide the modal box
          });

          // Handle "No" button click
          $('#modal-no').on('click', function() {
            $checkbox.prop("checked", false); // Uncheck the checkbox
            $('#myModal').modal('hide'); // Hide the modal box
          });
        }
      });
    });
  </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search