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')
Related
I have a form which consists of some elements such as a select-input and a checkbox.
The submit-button is disabled and I want to enable the button only if two conditions are fulfilled. An initial version works well, but only if clicking on the checkbox is the last step. But it should be a function that reacts on both, clicks/changes in the select and the checkbox.
The following code is working but with the problem explained above.
$('#toscheck').click(function() {
if ($(this).is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
The following solution doesn't work:
$('document').ready(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
But how can I solve this? What I have found on SO wasn't really helpful.
Again: it should work as following; if the checkbox is selected AND the selected option has a value, the button would be enabled.
Thanks in advance.
First, store you element in variables:
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
Then, create your validation function with the stored variables. Note that I replace attr and removeAttr with .prop, it is better:
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
Then, bind the events:
$toscheck.add($ctry).on( 'change', checkThings );
Note that I used change on both elements since it does work with inputs and checkboxes.
Final code :
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
$toscheck.add($ctry).on( 'change', checkThings );
$(document).ready(function() {
$('#toscheck,#ctry').change(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
});
use this code
.change function detects change and then on call check whether your AND condition is met or not
and add #toscheck in quotes i.e. '#toscheck'
$('#toscheck,#xyz,#abc').change()
for detecting change for multiple elements
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/
Can someone explain me why this snippet can't work ?
I can't use specific features like window.location, submit(), (instead of trigger()), because this function is bound to elements that are very differents.
$('a, button').bind('click', function(oEvent, oData) {
var oButton = $(this);
var bSkip = (oData && oData.skip);
if(true === bSkip) {
return true;
} else {
oEvent.preventDefault();
//oEvent.stopPropagation();
if(confirm('This is a confirm box')) {
$(oButton).trigger('click', { skip: true });
}
}
});
Thanks in advance ! ;)
In your case even though the click event gets fired the default behavior of the links may not be triggered because of the constraints imposed by the browser
If I understand what you are trying to do correctly(if the action s not confirmed then cancel the default behavior), then you can achieve it by the below... there is no need to fire the event again
$('a, button').bind('click', function (oEvent, oData) {
if (confirm('This is a confirm box')) {
return true;
} else {
oEvent.preventDefault();
}
});
Demo: Fiddle
I am using this code to check if an inputbox is empty or not and it works fine but it only checks check a key is press not when the page loads.
It's does what it should but I also want it to check the status when the page loads.
Here is the current code:
$('#myID').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
Try the following:
$(function() {
var element = $('#myID');
var toggleClasses = function() {
if (element.val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
};
element.on('keyup keydown keypress change paste', function() {
toggleClasses(); // Still toggles the classes on any of the above events
});
toggleClasses(); // and also on document ready
});
The simplest way to do is trigger any of the keyup,keydown etc event on page load. It will then automatically call your specific handler
$(document).ready(function(){
$("#myID").trigger('keyup');
});
try checking the value on a doc ready:
$(function() {
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
EDIT: just as an update to this answer, a nicer approach might be to use toggle class, set up in doc ready then trigger the event to run on page load.
function check() {
var $status = $('#status');
if ($(this).val()) {
$status.toggleClass('required_ok').toggleClass('ok');
} else {
$status.toggleClass('required_ok').toggleClass('not_ok');
}
}
$(function () {
$('#myID').on('keyup keydown keypress change paste', check);
$('#myID').trigger('change');
});
Well then why dont just check the field after the page is loaded?
$(document).ready(function(){
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
I've got this snippet of code to disable all text selection. How would I go about disabling all text except for input? I tried $('* :not(input)').disableTextSelect(); but it disabled selection for everything (input included)
$.extend($.fn.disableTextSelect = function () {
return this.each(function () {
if ($.browser.mozilla) {//Firefox
$(this).css('MozUserSelect', 'none');
} else if ($.browser.msie) {//IE
$(this).bind('selectstart', function () { return false; });
} else {//Opera, etc.
$(this).mousedown(function () { return false; });
}
});
});
$('* :not(input)').disableTextSelect();
$(document).bind('mousedown selectstart', function(e) {
return $(e.target).is('input, textarea, select, option, html');
});
Thanks to #user2873592, who mentioned that adding html here would fix the chrome scroll bar can't be dragged issue.
This works in IE and FF:
jQuery(document).ready(function () {
//Disable default text selection behavior
toggleEnableSelectStart(false);
//for inputs it must be possible to select text
jQuery("input[type=text]").focusin(function () { toggleEnableSelectStart(true); });
jQuery("input[type=text]").mouseover(function () { toggleEnableSelectStart(true); });
jQuery("input[type=text]").focusout(function () { toggleEnableSelectStart(false); });
jQuery("input[type=text]").mouseout(function () { toggleEnableSelectStart(false); });
});
function toggleEnableSelectStart(enable) {
document.onmousedown = function (e) { return enable; };
document.onselectstart = function (e) { return enable; }; ;
}
The problem seems to be that this disabling is inherited. So, even though you aren't selected them in the $() they still get disabled. But this can also be in our favor.
After disabling, you can enable the inputs.
$('body').css('MozUserSelect', '-moz-none');
$('input').css('MozUserSelect', 'text');
NOTE: the value must be '-moz-none'. If 'none', it can't be changed.
I can't test IE nor do I have a solution for Opera. But maybe this will help part way.