I have a panel activated/deactivated with a checkbox (chk1)'On/Off'. This panel contains a checkbox (chk2) and a radio button (rbtn).
When the radio button (rbtn) is checked the checkbox must be disabled.
When the panel is disabled by unchecking the 'On/Off' checkbox, the radio button and the checkbox (chk2) are disabled.
The problem is that when I open the page with panel enabled, the code from javascript is executed, but when I open the page with panel disabled, after I enabled the panel the javascript doe not work when I check the radio button so that the chk2 became disabled.
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
alert('if');
}
else {
$(controlToSet).removeAttr('disabled');
alert('else');
}
}
});
When the panel is updated the javascript code is not available anymore.
Don't use the click event on checkboxes but the change one :
$('input[id^=rbtn]').change(function () {
This way you'll get the new state. The click event is generated before the checkbox is changed.
Instead of this:
$(controlToSet).attr('disabled', 'disabled');
$(controlToSet).removeAttr('disabled');
Do this:
$(controlToSet).prop('disabled', true);
$(controlToSet).prop('disabled', false);
$(document).ready(function (){
$('input[id^=rbtn]').change(function () {
SetControlEnableState();
});
function SetControlEnableState() {
if ($('#rbtn').is(':checked')) {
$('#chk2').attr('disabled', 'disabled');
alert('if');
}
else {
$('#chk2').removeAttr('disabled');
alert('else');
}
}
Simplify the whole thing:
$(document).ready(function () {
$('input[id^=rbtn]').change(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
controlToSet.prop('disabled', control.is(':checked'));
}
});
try this
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $(this));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
} else {
$(controlToSet).removeAttr('disabled');
}
}
});
Related
I have an application written in ASP.NET MVC5, I have A table it consists of checkboxes, text and action buttons, so each item in the table has its own action button called .table-btn. I would like to have it so that if I select more than one checkbox, then the entire column of the action buttons given a class of .table-btn disabled. Then a second button called #second-verify-btn is enabled.
So far I have it working so that if I select more than 2 checkboxes the #second-verify-btn is enabled.
$('#second-verify-btn').prop('disabled', true);
$(".individual").on("click", function () {
if ($(".individual:checked").length > 1) {
$('#second-verify-btn').prop('disabled', false);
}
else {
$('#second-verify-btn').prop('disabled', true);
}
});
Try using class insted of id.
Try :
$(".individual").on("click", function () {
if ($(".individual:checked").length > 1) {
$(this).closest('.second-verify-btn').prop('disabled', false);
}
else {
$(this).closest('.second-verify-btn').prop('disabled', true);
}
});
Got it to work with the following code:
$('.table-btn').prop('disabled', false);
$(".individual").on("click", function () {
if ($(".individual:checked").length > 1) {
$('.table-btn').prop('disabled', true);
}
else {
$('.table-btn').prop('disabled', false);
}
});
At page I have many button active state of type. I bind to the event click and check how many button have active status. But when I click at first button I get zero.
$(".btn-quote").on("click", function (e) {
var totalActiveQuote= $(".btn-quote.active").length;
if (totalActiveQuote > 0) {
console.log("active");
} else {
console.log("deactive");
}
});
What I should do to fix this?
jsfiddle.net
https://jsfiddle.net/haqkbvbh/
This is because the active class is toggled after your onClick event fires. You could fix it by toggling it on your own.
$(document).ready(function(){
$(".btn-quote").on("mouseup", function (e) {
$(this).toggleClass("myActive");
var totalActiveQiote = $(".btn-quote.myActive").length;
$("#totalActive").html(totalActiveQiote);
});
});
You could circumvent this by e.g.:
$(document).ready(function(){
$(".btn-quote").on("click", function (e) {
$(this).toggleClass("active");
var totalActiveQiote = $(".active").length;
$("#totalActive").html(totalActiveQiote);
});
});
https://jsfiddle.net/zpqcac1h/
I was calling jQuery.click() on all my checkboxes when a global checkbox is checked. I want to disable a button if none of the normal checkboxes are checked. Hence, I was counting number of checked checkboxes using the code below. But when we manually click on .chkLst happens $(this) comes already checked and when I call click() function, $(this) comes unchecked.
$(".grid").on("click", ".chkLst", function() {
if($(this).is(":checked")){
deleteBtnDisableCheck++;
} else {
deleteBtnDisableCheck--;
}
if (deleteBtnDisableCheck == 0) {
$('#btnDeleteLst').addClass("btnDisable");
} else {
$('#btnDeleteLst').removeClass("btnDisable");
}
});
$(".grid").on("click", ".chkLstAll", function() {
$(".chkLst").each(function() {
$(this).click();
});
});
You can do the above operation easily using selector, so you dont require a counter variable.
//function to call when local checkbox is clicked
$(".grid").on("click", ".chkLst", function() {
callUpdateClassFunction();
});
//function to call when global checkbox is clicked
$(".grid").on("click", ".chkLstAll", function() {
$(".chkLst").prop('checked',this.checked);
callUpdateClassFunction();
});
//function to update class
function callUpdateClassFunction(){
if($(".chkLst:checked").length > 0){
$('#btnDeleteLst').addClass("btnDisable");
}
else{
$('#btnDeleteLst').removeClass("btnDisable");
}
}
I have a box with a checkbox, I want to insert in jQuery if the checkbox is checked toggle the class on the box with a transition, but it fails and below is the code:
$(document).ready(function(){
if ($('.onoffcheck').is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
});
JSFIDDLE
Try
$(document).ready(function () {
$('.onoffcheck').change(function () {
$("#node2").toggleClass("panel-off2", this.checked).toggleClass("panel-success", !this.checked);
}).change()
});
Demo: Fiddle
First make sure to include the jQuery library.
Then you have to listen to the checkbox change event. Otherwise the conditional check gets only executed on document ready.
E.g.:
$(document).ready(function(){
$('.onoffcheck').on('change', function(){
if ($(this).is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
});
});
DEMO
You have to add a change listener to make the toggle logic execute on every checked change. See working example
var toggle = function () {
if ($('.onoffcheck').is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
};
$(document).ready(function () {
toggle(); // initial execution
$('.onoffcheck').on('change', toggle); // execute it on every change
});
I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden...
$(document).ready(function(){
if($("#upload_yes").is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
if($("#new_info_yes").is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
You aren't binding this code to the proper event:
$(document).ready(function() {
$("#upload_yes").on('change', function() {
if ($(this).is(':checked')) {
$("#upload_form").show();
$("#new_info_form").slideDown(500);
} else {
$("#upload_form, #new_info_form").hide();
}
});
});
See this fiddle
You must do the job in the change event.
then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.
The code :
$(document).ready(function(){
$('input#upload_yes').change(function(){
if($(this).is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
});
$('input#new_info_yes').change(function(){
if($(this).is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
//Trigger the change event so the divs are initially shown or hidden.
$('input[type=checkbox]').trigger('change');
});
To evaluate if something has changed you need to do your code inside an event! (in this case: change) because what you are doing is to get the value of is(':checked') just at $(document).ready and it will always return false because at first moment your element wasn't checked.
Well, this is the correct way :-)
(I tried to reduce code)
Live Demo:
http://jsfiddle.net/oscarj24/RSDRg/
Code:
$(document).ready(function() {
$('#upload_yes').on('change', function() {
var done = $(this).is(':checked');
if(done) {
$('#upload_form').show();
$('#new_info_form').slideDown(500);
} else {
var frm = $('#upload_form').add('#new_info_form');
frm.hide();
}
});
});