I have a below Jquery function which works perfectly to disable or enable a label,textbox and a button when the checkbox is checked or unchecked accodingly.The Issue is when the checkbox is checked the controls are enabled to enter value into the textbox and click add.As the postback occurs the checkbox is still checked but the controls labels ,textbox and button are disabled.So the user has to untick the checkbox and tick it again to enable the controls.I have a very less access to the checkbox id`s as they are auto generated.can someone suggest a work around to fix this issue
$(".rowtt :checkbox").live('click', function () {
var divVendorRow = $(this).parents(".rowtt").next();
if (divVendorRow[0].id.indexOf("divVendorCode") > 0) {
if (this.checked) {
$(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', false);
$(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', false);
$(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', false);
}
else {
$(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', true);
$(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', true);
$(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', true);
}
}
});
In the code for the postback you can set the fields to be enabled/disabled based on the checkbox because anything set like this on client-side is forgotten once the postback occurs.
The document.ready gets fired only for the first time when the page is loaded is this how the function should work or is something going wrong with my code.
document.ready would be called whenever page is loaded again (every postback)
if checkbox was checked last time and then postback happened, then again document.ready would call after postback... and it will disable the required controls again...
what issue are you facing now?
hope this helps...
Cheers!
KK
Please mark as Answer if post helps in resolving your issue
My Site
But is is bcoz all my controls are in update Panel on the page the document.ready is getting fired only for the first time. I have a break point on the document.ready function ..it gets fired only the first time the Page loads it doesn`t happen on further
postbacks.
Samveda
Member
113 Points
104 Posts
Jquery Checkbox
Apr 23, 2012 09:26 AM|LINK
$(".rowtt :checkbox").live('click', function () { var divVendorRow = $(this).parents(".rowtt").next(); if (divVendorRow[0].id.indexOf("divVendorCode") > 0) { if (this.checked) { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', false); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', false); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', false); } else { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', true); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', true); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', true); } } });breath2k
Contributor
2101 Points
821 Posts
Re: Jquery Checkbox
Apr 23, 2012 09:40 AM|LINK
In the code for the postback you can set the fields to be enabled/disabled based on the checkbox because anything set like this on client-side is forgotten once the postback occurs.
asteranup
All-Star
30184 Points
4906 Posts
Re: Jquery Checkbox
Apr 23, 2012 09:58 AM|LINK
Hi,
Can you share the HTML for your contorls? Are you using updatepanel?
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
kedarrkulkar...
All-Star
35573 Points
5700 Posts
Re: Jquery Checkbox
Apr 23, 2012 10:00 AM|LINK
how about using same code on document.ready as well? so that on body_load in javascript, again controls are enabled/disabled based on checkbox status
like this
$(document).ready(function () { var divVendorRow = $(".rowtt :checkbox").parents(".rowtt").next(); if (divVendorRow[0].id.indexOf("divVendorCode") > 0) { if ($(".rowtt :checkbox").checked) { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', false); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', false); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', false); } else { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', true); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', true); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', true); } } });hope this helps...
KK
Please mark as Answer if post helps in resolving your issue
My Site
Samveda
Member
113 Points
104 Posts
Re: Jquery Checkbox
Apr 23, 2012 10:12 AM|LINK
@kedarrkulkarni
would like to go with your approach this is how my .Js file looks like where should I be placing your code.
$(document).ready(function () { $("#txtCardNo").live('blur', function () { if ($(this).val().length != 0) { $.ajax({ type: "POST", url: "FOPDetails.aspx/CreditCardTypeGet", data: "{strCardNo: '" + $(this).val() + "'}", contentType: "application/json; charset=utf-8", success: function (msg) { $("#lstCardType").val(msg.d); }, error: function (msg1) { } }); } }); $(".rowtt :checkbox").live('click', function () { var divVendorRow = $(this).parents(".rowtt").next(); if (divVendorRow[0].id.indexOf("divVendorCode") > 0) { if (this.checked) { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', false); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', false); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', false); } else { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', true); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', true); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', true); } } }); }); function pageLoad() { $(".rowtt .input5:even").removeClass("input5").addClass("altinput5"); }kedarrkulkar...
All-Star
35573 Points
5700 Posts
Re: Jquery Checkbox
Apr 23, 2012 10:25 AM|LINK
try this
$(document).ready(function () { $("#txtCardNo").live('blur', function () { if ($(this).val().length != 0) { $.ajax({ type: "POST", url: "FOPDetails.aspx/CreditCardTypeGet", data: "{strCardNo: '" + $(this).val() + "'}", contentType: "application/json; charset=utf-8", success: function (msg) { $("#lstCardType").val(msg.d); }, error: function (msg1) { } }); } var divVendorRow = $(".rowtt :checkbox").parents(".rowtt").next(); if (divVendorRow[0].id.indexOf("divVendorCode") > 0) { if ($(".rowtt :checkbox").checked) { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', false); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', false); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', false); } else { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', true); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', true); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', true); } } }); $(".rowtt :checkbox").live('click', function () { var divVendorRow = $(this).parents(".rowtt").next(); if (divVendorRow[0].id.indexOf("divVendorCode") > 0) { if (this.checked) { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', false); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', false); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', false); } else { $(divVendorRow).find("input[id$='cmdAdd']").prop('disabled', true); $(divVendorRow).find("input[id$='txtVendorCodeName']").prop('disabled', true); $(divVendorRow).find("span[id$='lblVendorCode']").prop('disabled', true); } } }); }); function pageLoad() { $(".rowtt .input5:even").removeClass("input5").addClass("altinput5"); }you can even extract common code from document.ready and cehckbox click event and create a common function
hope this helps...
KK
Please mark as Answer if post helps in resolving your issue
My Site
Arshad Ashra...
Member
664 Points
158 Posts
Re: Jquery Checkbox
Apr 23, 2012 10:34 AM|LINK
Enable Checkbox in
$(document).ready(function() {
Find Your Checkbox And Disable CheckBox Checked to False
}
Samveda
Member
113 Points
104 Posts
Re: Jquery Checkbox
Apr 23, 2012 11:16 AM|LINK
The document.ready gets fired only for the first time when the page is loaded is this how the function should work or is something going wrong with my code.
kedarrkulkar...
All-Star
35573 Points
5700 Posts
Re: Jquery Checkbox
Apr 23, 2012 12:11 PM|LINK
Yes.
document.ready would be called whenever page is loaded again (every postback)
if checkbox was checked last time and then postback happened, then again document.ready would call after postback... and it will disable the required controls again...
what issue are you facing now?
hope this helps...
KK
Please mark as Answer if post helps in resolving your issue
My Site
Samveda
Member
113 Points
104 Posts
Re: Jquery Checkbox
Apr 23, 2012 12:17 PM|LINK
But is is bcoz all my controls are in update Panel on the page the document.ready is getting fired only for the first time. I have a break point on the document.ready function ..it gets fired only the first time the Page loads it doesn`t happen on further postbacks.