Jquery Checkbox RSS

• • Reply
  

  Samveda

  Member

  113 Points

  104 Posts

  Jquery Checkbox

  Apr 23, 2012 09:26 AM|LINK

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

• • Reply
  

  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.

• • Reply
  

  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?

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  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...

  Cheers!
  KK
  
  Please mark as Answer if post helps in resolving your issue
  My Site
  • Edited by kedarrkulkarni on Apr 23, 2012 10:01 AM
• • Reply
  

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

• • Reply
  

  kedarrkulkar...

  All-Star

  35573 Points

  5700 Posts

  Re: Jquery Checkbox

  Apr 23, 2012 10:25 AM|LINK

  Samveda

  @kedarrkulkarni

  would like to go with your approach this is how my .Js file looks like where should I be placing your code.

  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...

  Cheers!
  KK
  
  Please mark as Answer if post helps in resolving your issue
  My Site
• • Reply
  

  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

  
  

  }

   

• • Reply
  

  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.

• • Reply
  

  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...

  Cheers!
  KK
  
  Please mark as Answer if post helps in resolving your issue
  My Site
• • Reply
  

  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.