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
1,031 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,720 points
2,388 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,720 points
3,593 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
43,407 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,720 points
3,494 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,720 points
1,652 views
0 votes
0 answers

event.preventDefault() vs. return false

When I want to prevent other event ...READ MORE

Jun 10 in JQuery by gaurav
• 12,420 points
11 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
293 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,720 points
8,250 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,720 points
15,108 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
107 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