4

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);
    }
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Patel Jack
  • 45
  • 1
  • 1
  • 3

4 Answers4

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
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>
Jai
  • 74,255
  • 12
  • 74
  • 103
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>
Abhay Naik
  • 405
  • 1
  • 4
  • 17
0
$('input:radio[name="IsLive"]').change(function() {
if ($(this).is(':checked') && $(this).val() != 'Y') {
document.getElementById("LiveDate").disabled = true; 
} 
});
CodingSolutions
  • 81
  • 3