disable textbox using jquery

Question

I have three radio buttons with same name and different values When I click the third radio button the checkbox and textbox going to be disabled but when I choose other two radio buttons it must be show I need the help in Jquery Thanks in advance       lt form name  checkuserradio  gt       lt input type  radio  value  1  name  userradiobtn  id  userradiobtn   gt        lt input type  radio  value  2  name  userradiobtn  id  userradiobtn   gt       lt input type  radio  value  3  name  userradiobtn  id  userradiobtn   gt       lt input type  checkbox  value  4  name  chkbox    gt       lt input type  text  name  usertxtbox  id  usertxtbox    gt   lt  form gt

User · Answer

I m not sure why some of these solutions use  each   - it s not necessary   Here s some working code that disables if the 3rd checkbox is clicked  otherwise is removes the disabled attribute   Note  I added an id to the checkbox  Also  remember that ids must be unique in your document  so either remove the ids on the radiobuttons  or make them unique     input radio name  userradiobtn     click function         var isDisabled     this  is   checked    amp  amp    this  val       3           chkbox   attr  disabled   isDisabled           usertxtbox   attr  disabled   isDisabled

User · Answer

This thread is a bit old but the information should be updated    http   api jquery com attr      To retrieve and change DOM properties such as the checked  selected    or disabled state of form elements  use the  prop   method        radiobutt input type radio    each function i     this  click function          if i  2      3rd radiobutton             textbox1   prop  disabled   true                checkbox1   prop  disabled   true              else               textbox1   prop  disabled   false                checkbox1   prop  disabled   false

User · Answer

I m guessing you probably want to bind a  click  event to a number of radio buttons  read the value of the clicked radiobutton and depending on the value  disable enable a checkbox and or textbox   function enableInput class               class     input   attr  disabled   false      function disableInput class               class     input   attr  disabled   true        document  ready function            changeBoxes   click function event           var value     this  val            if value     x                enableInput  foo      with class foo             enableInput  bar      with class bar          else              disableInput  foo      with class foo             disableInput  bar      with class bar

User · Answer

Not really necessary  but a small improvement to o k w  s code that would make the function call faster  since you re moving the conditional outside the function call        radiobutt input type radio    each function i        if  i    2      3rd radiobutton           this  click function                      textbox1   attr  disabled    disabled                    checkbox1   attr  disabled    disabled                      else             this  click function                      textbox1   removeAttr  disabled                    checkbox1   removeAttr  disabled

User · Answer

Sorry for being so late at the party  but I see some room for improvement here  Not concerning  disable textbox   but to the radionbox selection and code simplification  making it a bit more future proof  for later changes   First of all  you shouldn t use  each   and use the index to point out a specific radio button  If you work with a dynamic set of radio buttons or if you add or remove some radio buttons afterwards  then your code will react on the wrong button   Next  but that wasn t probably the case when the OP was made  I prefer to use  on  click   function         instead of click    http   api jquery com on   Lst but not least  also the code could be made more simple and future proof by selecting the radio button based on it s name  but that appeared already in a post    So I ended up with the following code   HTML  based on code of o k w    lt span id  radiobutt  gt       lt input type  radio  name  rad1  value  1    gt       lt input type  radio  name  rad1  value  2    gt       lt input type  radio  name  rad1  value  3    gt   lt  span gt   lt div gt       lt input type  text  id  textbox1    gt       lt input type  checkbox  id  checkbox1    gt   lt  div gt    JS-code      name  rad1     on  click   function         var disable     this  val        2           textbox1   prop  disabled   disable            checkbox1   prop  disabled   disable

User · Answer

get radio buttons value and matches with each if it is 3 then disabled checkbox and textbox    x000D   x000D      radiobutt input type radio    click function      x000D        this  each function index   x000D        console log   this  val     x000D          if   this  val    3      get radio buttons value and matched if 3 then disabled  x000D                  textbox field   attr  disabled    disabled     x000D                  checkbox field   attr  disabled    disabled     x000D            x000D          else   x000D                  textbox field   removeAttr  disabled     x000D                  checkbox field   removeAttr  disabled     x000D            x000D            x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt span id  radiobutt  gt  x000D     lt input type  radio  name  groupname  value  1    gt  x000D     lt input type  radio  name  groupname  value  2    gt  x000D     lt input type  radio  name  groupname  value  3    gt  x000D   lt  span gt  x000D   lt div gt  x000D     lt input type  text  id  textbox field    gt  x000D     lt input type  checkbox  id  checkbox field    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I would ve done it slightly different    lt input type  radio  value  1  name  userradiobtn  id  userradiobtn    gt       lt input type  radio  value  2  name  userradiobtn  id  userradiobtn    gt        lt input type  radio  value  3  name  userradiobtn  id  userradiobtn  class  disablebox   gt       lt input type  checkbox  value  4  name  chkbox  id  chkbox  class  showbox   gt        lt input type  text  name  usertxtbox  id  usertxtbox  class  showbox    gt       Notice class attribute     document  ready function                   disablebox   click function                 showbox   attr  disabled   true                            This way should you need to add more radio buttons you don t need to worry about changing the javascript

User · Answer

HTML   lt span id  radiobutt  gt     lt input type  radio  name  rad1  value  1    gt     lt input type  radio  name  rad1  value  2    gt     lt input type  radio  name  rad1  value  3    gt   lt  span gt   lt div gt     lt input type  text  id  textbox1    gt     lt input type  checkbox  id  checkbox1    gt   lt  div gt    Javascript        radiobutt input type radio    each function i         this  click function              if i  2      3rd radiobutton                 textbox1   attr  disabled    disabled                     checkbox1   attr  disabled    disabled                       else                   textbox1   removeAttr  disabled                     checkbox1   removeAttr  disabled

User · Answer

MVC 4   Html CheckBoxFor generally people want to action on check and uncheck of mvc checkbox     lt div class  editor-field  gt       Html CheckBoxFor model   gt  model IsAll  new   id    cbAllEmp      lt  div gt     you can define id for the controls you want to change and in javascript do the folowing   lt script type  text javascript  gt        function                  cbAllEmp   click     function                  if      cbAllEmp   prop  checked      true                            txtEmpId   hide                            lblEmpId   hide                                      else                           txtEmpId   show                            txtEmpId   val                              lblEmpId   show                                         you can also change the property like       txtEmpId   prop  disabled   true        txtEmpId   prop  readonly   true

User · Answer

I know it is not a good habit to answer an old question but I m putting this answer for people who would see the question afterwards   The best way to change the state in JQuery now is through       input   prop  disabled   true        input   prop  disabled   false     Please check this link for full illustration  Disable enable an input with jQuery

User · Answer

document  ready function             txt1   attr  onfocus    blur             x000D   x000D    document  ready function      x000D        txt1   attr  onfocus    blur      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input id  txt1  gt  x000D   x000D   x000D

[jquery] disable textbox using jquery?

Examples related to jquery