jQuery checkbox change and click event

0 votes
$(document).ready(function() { 
    //set initial state. 
    $('#textbox1').val($(this).is(':checked')); 
  
    $('#checkbox1').change(function() { 
    $('#textbox1').val($(this).is(':checked')); 
}); 

$('#checkbox1').click(function() { 
  if (!$(this).is(':checked')) { 
    return confirm("Are you sure?"); 
      } 
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="checkbox" id="checkbox1"/><br /> 
<input type="text" id="textbox1"/>

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation which leaves things in an inconsistent state and the textbox says false when the checkbox is checked. How can I deal with the cancellation and keep textbox value consistent with the check state?

Feb 23 in Java-Script by Soham
• 8,730 points
494 views

1 answer to this question.

0 votes

Have shared an approach which will add the benefit of firing when a label associated with a checkbox is clicked. 

$(document).ready(function() { 
        //set initial state. 
        $('#textbox1').val(this.checked); 

        $('#checkbox1').change(function() { 
          if(this.checked) { 
              var returnVal = confirm("Are you sure?"); 
              $(this).prop("checked", returnVal); 
    } 
    $('#textbox1').val(this.checked); 
    });
});

answered Feb 23 by Aditya
• 7,280 points

Related Questions In Java-Script

0 votes
1 answer

jQuery AJAX fires error callback on window unload - how do I filter out unload and only catch real errors?

Hello, In the error callback or $.ajax you have three ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,680 points
2,360 views
0 votes
1 answer

How to select and manipulate CSS pseudo-elements such as ::before and ::after using jQuery?

Hii @kartik, Here is the way to access ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,680 points
3,420 views
0 votes
2 answers

How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

For security reasons browsers do not allow ...READ MORE

answered Dec 16, 2020 in Java-Script by Rajiv
• 8,910 points
40,866 views
0 votes
1 answer

How jQuery event to trigger action when a div is made visible?

Hello @kartik, You could always add to the ...READ MORE

answered Aug 25, 2020 in Java-Script by Niroj
• 82,680 points
3,112 views
0 votes
1 answer

How to change an element's ID with jQuery?

Hello @kartik, Your syntax is incorrect, you should ...READ MORE

answered Aug 25, 2020 in Java-Script by Niroj
• 82,680 points
1,500 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
284 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,680 points
7,913 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,680 points
14,543 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,680 points
1,083 views
0 votes
1 answer

Open a URL in a new tab (and not a new window)

Nothing an author can do can choose ...READ MORE

answered Feb 23 in Java-Script by Aditya
• 7,280 points
72 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP