I am currently trying to add a JavaScript confirm message when a user attempts to deselect an option.
If a user selects cancel on the confirm screen the check box should remain ticked. The problem I am having is that the check box becomes unchecked even if I return false.
Code example can be found here http://jsfiddle.net/Amjzv/
HTML
<div class="ServiceDesc Alternate">
<span class="expandable">
<input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
</span>
</div>
JQuery
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function () {
ToggleCheckboxes($(this),true);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
return false;
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}
Simplest Way
$("#ctl01_chk").click(function() {
if(confirm("Are you sure?")) {
// continue;
} else {
return false;
}
});
Demo
You need to use preventDefault() rather than returning false ... you can do this by passing the event to the function that shows the confirm
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function (event) {
ToggleCheckboxes($(this),true,event);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm,event) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
event.preventDefault();
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}
Working example here
you should pass the click eventObject to your function so you can do
e.preventDefault();
Here's an update
You are returning false inside your custom function, but not inside the function assigned to the click event. just fix the following line:
$('.expandable').click(function () {
return ToggleCheckboxes($(this),true);
});
Related
Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?
In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO
You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.
I have a form checkbox inside map. When unchecked I want the user to get a bootstrap confirm dialog to ask "are you sure you want to turn off switch?" before the handle command.
code:
command.onAdd = function (map) {
var div = L.DomUtil.create('div', 'command');
div.innerHTML = '<form><input id="command" checked="true" type="checkbox"/>switch</form>';
return div;
};
command.addTo(map);
document.getElementById("command").addEventListener("click", handleCommand, false);
function handleCommand() {
if(this.checked == true){
}
else
{
}
}
you can use bootbox.js as a convenient way to do this:
function handleCommand() {
var checkbox = $(this);
if (!checkbox.is(':checked')) {
bootbox.confirm("Are you sure?", function (result) {
if (result) {
// your code
} else {
checkbox.prop('checked', true);
}
});
}
}
I want to disable link if user uncheck the checkbox.
tried something like:
$('#check1').click(function() {
if(!$(this).is(':checked')){
$('#tet1').bind('click', function(){ return false; });
}else{
$('#tet1').unbind('click');
}
});
but it did not work. http://jsfiddle.net/LX7wH/
Why this is not working for me? where i'm wrong?
Thank you!
You don't need to do anything when the checkbox is changed, just check if it's checked within an event handler for the anchor, and if it is checked, prevent the default action.
$('#tet1').on('click', function(e) {
if ( $('#check1').is(':checked') ) e.preventDefault();
});
Try,
var xEnabled = true;
$('#check1').click(function() {
xEnabled = $(this).is(':checked');
});
$('#tet1').click(function(){
if(!xEnabled) { return false; }
})
DEMO
I believe this is what you are after:
Google
<input type="checkbox" id="checkBox" />
$("a").click(function(e) {
if($("#checkBox").prop("checked") === true) {
e.preventDefault();
return false;
} else {
return true;
};
});
This will stop all links working however you can change the "a" selector to what ever you want.
http://jsfiddle.net/KDZDE/
here is my script. Now i can click one of these IDs and class "inputs" are visible. What i want is that I have to click on all elements.
$('#zwei,#sechs,#neun').bind('click', function() {
if( $(this).is(':checked')) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
JSFiddle:
http://jsfiddle.net/CLYC6/20/
can you help me please? whats wrong?
FK
Use this:
$('#zwei,#sechs,#neun').bind('click', function() {
$('.inputs').show();
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
$('.inputs').hide();
return;
}
});
});
Here is a LIVE DEMO.
Because #Rastko is not happy with the current solution here is one more:
$('#zwei,#sechs,#neun').bind('click', function() {
var showInput = true;
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
showInput = false;
return;
}
});
if (showInput) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
One more LIVE DEMO.
If statement should check whether all three are checked, and if input is not visible.
so:
if($('#zvei').is(':checked') && $('#neun').is(':checked') && $('#sechs').is(':checked') {
$('.inputs').show();
}
Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}