Enable/Disable Textbox in jquery

Question

I want to enable text box when first radio button is checked & if second then i want to disable textbox here is my code that is not working please help..

<label class="radio-inline">
    <input type="radio" value="Y" name="IsLive" class="grey">
    YES
</label>
<label class="radio-inline">
    <input type="radio" value="N" name="IsLive" class="grey">
    NO
</label>

<label class="col-sm-2 control-label">
    Live Date
</label>
<div class="col-sm-3">
    <input type="text" id="LiveDate" name="LiveDate" class="form-control date-picker">
</div>

$('input:radio[name="IsLive"]').change(function () {
    if ($(this).is(':checked') && $(this).val() == 'Y') {
        // append goes here
        $("#LiveDate").show();
    } else {
        $("#LiveDate").prop("disabled", true);
    }
});

use instead of $('input:radio[name="IsLive"]') use $('.grey') for selection — Ghanshyam Baravaliya
– Ghanshyam Baravaliya, Commented Apr 4, 2016 at 9:47

Rory McCrossan · Accepted Answer · 2016-04-04 09:52:10Z

5

You can achieve this by just setting the disabled property based on whether or not the value of the chosen radio is Y. Try this:

$('input:radio[name="IsLive"]').change(function() {
    $("#LiveDate").prop("disabled", this.value != 'Y');
});

Working example

Note that I removed the :checked condition because it's redundant for a radio button, as to raise a new change event the element must be checked.

edited Apr 4, 2016 at 9:52

answered Apr 4, 2016 at 9:46

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rayon Over a year ago

How about this.value ?

Patel Jack Over a year ago

from your working example ,if i add disabled="true" in LiveDate then in both case it disabled and if i don't add it then it doesn't work pls help.

Rory McCrossan Over a year ago

@PatelJack I'm not sure what you mean? Can you add a link to an amended version of my working fiddle which shows the problem you have

Jai · Accepted Answer · 2016-04-04 09:50:50Z

1

Try this:

$('input:radio[name="IsLive"]').change(function() {
  var bool = $(this).val() !== 'Y';
  //$("#LiveDate").show();
  $("#LiveDate").prop("disabled", bool);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
  <input type="radio" value="Y" name="IsLive" class="grey">YES
</label>
<label class="radio-inline">
  <input type="radio" value="N" name="IsLive" class="grey">NO
</label>

<label class="col-sm-2 control-label">
  Live Date
</label>
<div class="col-sm-3">
  <input type="text" id="LiveDate" name="LiveDate" class="form-control date-picker">
</div>

edited Apr 4, 2016 at 9:50

answered Apr 4, 2016 at 9:46

Jai

74.8k12 gold badges76 silver badges104 bronze badges

Comments

Abhay Naik · Accepted Answer · 2016-04-04 10:40:29Z

1

Change your jquery code :

$("input#LiveDate").prop('disabled', true);
$('input:radio[name="IsLive"]').change(function() {
  if ($(this).is(':checked') && $(this).val() == 'Y') {
    // append goes here
    $("input#LiveDate").prop('disabled', false);
  } else {
    $("input#LiveDate").prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
  <input type="radio" value="Y" name="IsLive" class="grey"> YES
</label>
<label class="radio-inline">
  <input type="radio" value="N" name="IsLive" class="grey"> NO
</label>

<label class="col-sm-2 control-label">
  Live Date
</label>
<div class="col-sm-3">
  <input type="text" id="LiveDate" name="LiveDate" class="form-control date-picker">
</div>

edited Apr 4, 2016 at 10:40

answered Apr 4, 2016 at 9:46

Abhay Naik

4051 gold badge4 silver badges17 bronze badges

1 Comment

Patel Jack Over a year ago

thanx for help..but in below code in both case the text box hide..and i want to enable and disable .

CodingSolutions · Accepted Answer · 2019-04-13 16:33:58Z

0

$('input:radio[name="IsLive"]').change(function() {
if ($(this).is(':checked') && $(this).val() != 'Y') {
document.getElementById("LiveDate").disabled = true; 
} 
});

answered Apr 13, 2019 at 16:33

CodingSolutions

813 bronze badges

Collectives™ on Stack Overflow

Enable/Disable Textbox in jquery

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related