I'm using a checkbox and I want people to be able to check/uncheck it.
However, when they uncheck it, I'm using a jQueryUI modal popup to confirm that they really want to do that. Thus they can click OK or Cancel, and I want my checkbox to be unchecked only if they click OK.
That's why I would like to catch the uncheck event to prevent the checkbox from being visually unchecked, and uncheck it myself programmatically if the user happens to click on OK.
How could I do that ?
PS: I know I could re-check it after if the user clicks on Cancel but that would trigger the check event which I do not want.
$("#checkboxID").on("click", function (e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
// do the confirmation thing here
e.preventDefault();
return false;
}
});
Pure CSS Solution
Select Checkbox like -
input[type="checkbox"] {
pointer-events: none;
}
Works Pretty well, and now you can toggle your checkbox on any element click of your choice.
Something like:
$("#test").on('change', function() {
this.checked=!this.checked?!confirm('Really uncheck this one ?'):true;
});
FIDDLE
$("#checkboxID").click(function(e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
//check it
} else {
// prevent from being unchecked
this.checked=!this.checked;
}
});
How about using the HTML disabled property?
<input type="checkbox" name="my_name" value="my_value" disabled> My value<br>
Link:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
$("#yourCheckBoxId").on('change',function(e){
e.preventDefault();
$("#yourPopDiv").popup();
});
preventDefault() will disable default behavior of your input[type="checkbox"]
And on your popup div
$("#ok").on('click',function(){
$("#yourCheckBoxId").attr("checked",true);
});
My value
Light javascript. Better than disable if you still need the element submitted in a form.
Related
guys. I have a problem that i can't resolve. I need to switch the behavior using ".on/.off" methods that will be working when i set or remove the tick from the checkbox. How can i do that?
For example: I have a button that will be zooming in/change color/moving by pressing on it. But when i set the tick on one of a checkboxes, i need to disable this event from the button using ".off" method.
I tried like
$(".button").on('click', function(){
$(this).toggleClass('active');
});
$(".button2").on('click', function(){
$(this).toggleClass('active2');
});
$(".button3").on('click', function(){
$(this).toggleClass('active3');
});
$(".button4").on('click', function(){
$(this).toggleClass('active4');
});
var check = $("#check");
check.change(function(){
if ($(this).is(':checked'))
{
$('.button').off('click');
}
});
but for some reason it will disable my event until i refresh the page, even if i remove the tick from one of my checkboxes
Thanks in advance.
This is happening because when you tick the checkbox, your code will remove the click listener from the .button element and you're not setting it back when the checkbox is unchecked.
So, if you want the click listener on the .button element to fire again when the checkbox is unchecked, you can do any one of the two things as mentioned below.
First, you can add an else block after the if block in the change listener of checkbox. Following code will work for this approach:
var check = $("#check");
check.change(function(){
if ($(this).is(':checked')) {
// This will remove the click listener from the button if checkbox is checked
$('.button').off('click');
}
else {
// This will again add the click listener to the button if checkbox is not checked
$(".button").on('click', function(){
$(this).toggleClass('active');
});
}
});
But I will not recommend the above approach because it will unnecessarily increase the size of code.
Here's the second and a better approach. Inside the click event handler function, you can add an if statement to check if the checkbox is ticked. Below is the code for the same:
$(".button").on('click', function(){
if (! $("#check").is(':checked')) {
// This will only be fired if checkbox is not checked
$(this).toggleClass('active')
}
});
You can add this if to any other block according to your requirement.
The main advantages of using the above code are:
Code will not be increased as compared to 1st approach
You don't need a change listener for the checkbox (Yeah! Just remove it!)
checkbox can not checked or uncheck by directly click on checkbox ?
i was create click on div for toggle checked/unchecked checkbox. this function was best.
But when i tried to click on checkbox directly, i can not check or uncheck checkbox.
How can i do that ?
https://jsfiddle.net/jddwxtst/
<script>
function onclick_cover_checkbox_fn(){
var main_checkbox_checked_uncheck_var = document.getElementById("main_checkbox_checked_uncheck");
var main_checkbox_checked_uncheck_var_checked_status = main_checkbox_checked_uncheck_var.checked;
if(main_checkbox_checked_uncheck_var_checked_status != true)
{
document.getElementById("main_checkbox_checked_uncheck").checked = true;
checked_all_or_uncheck_all_fn();
}
else
{
document.getElementById("main_checkbox_checked_uncheck").checked = false;
checked_all_or_uncheck_all_fn();
}
}
</script>
<script>
function checked_all_or_uncheck_all_fn(){
alert("5555");
}
</script>
Here is a example in jquery:
Bind a change handler, then just uncheck all of the checkboxes, apart from the one checked:
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
Here's a fiddle
here is the updated working example https://jsfiddle.net/jddwxtst/2/
problem is when you directly click on the checkbox it first run checked_all_or_uncheck_all_fn() method but then it execute onclick_cover_checkbox_fn() method too (you don't need) because div also receive click event.so if you check then method onclick_cover_checkbox_fn() method will uncheck it .to avoid this you shroud stop event propagating in checked_all_or_uncheck_all_fn() method.
function checked_all_or_uncheck_all_fn(e){
alert("5555");
// stop event propagating
}
for cross browser stop propagating read this http://javascript.info/tutorial/bubbling-and-capturing
I am using jQuery trying to validate that a checkbox has been checked before allowing a user to click on a 'Proceed' button.
The 'Proceed' button is set 'Enable = false' when the page loads.
So far I have tried :
// On check of the accept terms checkbox
$(".chkTandCs").change(function () {
// If checked, enable the Continue button, else, disable it.
if ($(this).is(":checked")) {
$(".lbnAcceptCurrent").removeAttr('disabled');
}
else {
$(".lbnAcceptCurrent").attr("disabled", "disabled");
}
});
This hasn't worked.
The checkbox and 'Proceed' button are inside a modal that opens when a different button has been clicked.
All help very much appreciated
Use prop() instead
$(".chkTandCs").change(function () {
$(".lbnAcceptCurrent").prop('disabled', !this.checked);
});
If the modal generates the markup dynamically, you'll need to delegate
$(document).on('change', '.chkTandCs', function () {
$(".lbnAcceptCurrent").prop('disabled', !this.checked);
});
and replace document with the closest static parent element of the modal
I'm trying to cancel a radio button click. I have a jquery click handler like this:
$("#myList").on("click","input", function(){
return false;
});
This works fine when there is already a selected value. But if I click a radio button from a group that has no selected value, the return false does not work, and the element that I clicked actually gets selected.
Any clues?
Edit:
Here is the fiddle demonstrating the problem:
http://jsfiddle.net/SFZMm/2/
Edit2:
Just found out this only happens on chrome :( Firefox and IE work as expected. Maybe a workaround?
Here, try this JS_FIDDLE-DEMO
It detects the click on the parent container. Not the radio button it self.
//listen to click on parent div,span,li for example.
$("#myList-parent").click(function(){
alert('You clicked radio!');
//Now put your logic here. I decide based on the radio button value.
if($('input:radio[name=type]:checked').val() == "UnSelectable"){
alert($('input:radio[name=type]:checked').val());
return false;
}
});
Update (work around for Chrome): JS-FIDDLE-DEMO
It seems Chrome has issues with on click so replace it with on mousedown (or use both?):
$("input").on("mousedown",function(e) {
e.preventDefault();
if ($(this).is(':checked')) {
alert('This radio button was checked in mousedown');
} else {
alert('This radio button was not checked in mousedown');
}
});
Use change methods for input elements instead of click.
$("#myList").on("change","input", function(e){
if(something){
e.preventDefault();
} else{
//for test
alert('not true');
}
});
I have a checkbox column in gridview and getting its Click event. But I just has relised I do not need Click event rather I need to know the events if checkbox is checked or unchecked on Client side. But these events are not available.
Please guide how to handle this.
use delegate on the column by setting a css class to the checkboxs.
then listen to the click event of these checkboxes and check the .checked property of the actual dom element
you are probably looking to check that the checkbox input is(":checked")
Check out my example on jsfiddle: http://jsfiddle.net/RWCZK/
$("#checked").click(function()
{
if($(this).is(":checked"))
{
$("#show").hide();
}
else
{
$("#show").show();
}
});
You can still use your click event. Inside of the function use:
$('#mycheckbox').click(function()
{
if($(this).prop('checked'))
{
//Do something here
}
else
{
//Do something else here
}
});