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

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/> 
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

You should remove the identical ids. `name`s can be identical, but `id`s must be unique. — Eric, Oct 30 '09 at 10:55

score 213 · Accepted Answer · answered Oct 30 '09 at 10:28

213

HTML

<span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="radio" name="rad1" value="3" />
</span>
<div>
  <input type="text" id="textbox1" />
  <input type="checkbox" id="checkbox1" />
</div>

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

  });

answered Oct 30 '09 at 10:28

o.k.w

24,261
6
60
62

@vinothkumar: Matt's answer is more efficient. Take mine as a not-so-good example. – o.k.w Oct 30 '09 at 10:35
Here where we can define i value. – svk Oct 30 '09 at 10:41
@vinothkumar `i` is passed in from `function(i)` via JQuery's `each()`. `i==2` is used to access the 3rd radio button. Refer to my codes. – o.k.w Oct 30 '09 at 11:12
any mercy for older browsers ? – sarepta Jun 25 '14 at 06:38
6

`` -- Cousin of RadioHead? – Icemanind Aug 20 '14 at 19:02

score 27 · Answer 2 · answered Oct 30 '09 at 10:32

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

mac10688 · Answer 3 · 2015-09-18T20:04:51.500

23

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

edited Sep 18 '15 at 20:04

answered Jul 08 '14 at 19:29

mac10688

1,973
2
22
32

3

+1, but I found that you cannot use `removeProp` for the disabled property. The jQuery docs say to use `prop("disabled", false);` instead. http://api.jquery.com/prop/#prop-propertyName-value – Lee Grissom Aug 18 '14 at 21:29
1

it is fara better way to use prop(). I had some issues on using attr() on checkboxes. First time its ok second time no response. So use prop(). +1 from me – brandelizer Mar 19 '15 at 14:49

score 11 · Answer 4 · answered Oct 30 '09 at 10:41

11

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") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

answered Oct 30 '09 at 10:41

ScottE

21,027
18
91
129

1

@ScottE: `each()` was used because we want to get the 3rd radio button. We can use `$("input[type=radio]:eq(2)")` too. Your method identify the radio button by value, which of course is valid too. :) – o.k.w Oct 30 '09 at 11:01
if the user first select the checkbox and enter some text in textbox and then if he select the radio button the checked checkbox must be unchecked and the textbox going to be cleared?How can I do this...I ask these questions because I am anewbie...Thanks in advance.. – svk Oct 30 '09 at 11:38
@vinothkumar - with that requirement in mind I probably would not have set up the js as above, but in this case, just check is the element is disabled and call $("#usertxtbox").val("") on the I would have – ScottE Oct 31 '09 at 13:10

score 8 · Answer 5 · edited May 23 '17 at 12:10

8

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?

edited May 23 '17 at 12:10

Community

1
1

answered Nov 19 '14 at 10:31

Ahmed Kamal

1,406
14
26

Per Jquery official website, prop is the way to go. +1 – Moiz Tankiwala Dec 19 '14 at 07:24

score 2 · Answer 6 · edited Mar 12 '15 at 20:00

I would've done it slightly different

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />

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

Niels Bom · Answer 7 · 2009-10-30T10:31:33.800

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

I haven't made this work with the supplied HTML, but that's fairly easy imho. — Niels Bom, Oct 30 '09 at 10:44

score 0 · Answer 8 · answered Jan 19 '16 at 11:59

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)

<span id="radiobutt">
    <input type="radio" name="rad1" value="1" />
    <input type="radio" name="rad1" value="2" />
    <input type="radio" name="rad1" value="3" />
</span>
<div>
    <input type="text" id="textbox1" />
    <input type="checkbox" id="checkbox1" />
</div>

JS-code

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

score 0 · Answer 9 · answered Jul 21 '16 at 17:47

MVC 4 @Html.CheckBoxFor generally people want to action on check and uncheck of mvc checkbox.

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

you can define id for the controls you want to change and in javascript do the folowing

<script type="text/javascript">
    $(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);

score 0 · Answer 10 · answered Jun 20 '17 at 18:05

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});

$(document).ready(function () {
  $("#txt1").attr("onfocus", "blur()");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

score 0 · Answer 11 · answered May 14 '18 at 05:47

get radio buttons value and matches with each if it is 3 then disabled checkbox and textbox.

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>

disable textbox using jquery?

11 Answers11

Linked

Related