disable link if checkbox s unchecked - javascript

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/

Related

Getting checked checkboxes with jQuery

I have a function that is supposed to catch changes to all checkboxes. It works when the boxes are clicked manually, but does not work when the toggleAll() function triggers them.
Anyway to correct this?
$(function() {
$(":checkbox").change(function(){
if ( this.checked ) {
alert(this.id+' is checked');
} else {
alert(this.id+' is not checked');
}
});
});
function toggleAll() {
var selectAllCheckbox = $("#selectAllCheckbox");
if ( selectAllCheckbox.prop('checked') ) {
// uncheck them all
$("[id^=friendRequestCheckbox]").attr('checked', false);
} else {
// check them all
$("[id^=friendRequestCheckbox]").attr('checked', true);
}
}
I am running an old version of jQuery and have not updated to the new version including prop, just in case that's relevant.
When changing elements programmatically, you also have to trigger the event programmatically. Try :
$("[id^=friendRequestCheckbox]").trigger('change')

click multiple elements to hide or show something - jquery

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();
}

jquery beforeunload messages depending on button clicked

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;
}

Checkbox confirm message - Remain checked if false

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);
});

How to show <tr> tag on clicking button and prevent page refresh

My Requirement is to hide a tag initially, if user clicks forwardbutton without checking any radio or checkbutton we have show the tag and have to prevent page refresh. But it is permanently not submitting on click, Plese someone help me.
$(document).ready(function()
{
var y=$('input').filter(':checked').length;
alert(y);
if(y == 0 )
{
$('#Q1_7_label').parents('TR').hide();
}
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
});
});
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
return true;
});
Just add return true at the end of the function
Try to replace
return false;
with
event.preventDefault();

Categories

Resources