CODEWITHSUNDEEP
javascriptjquery
Neculai Andrei
Neculai Andrei

Reputation: 223

How to toggle enable/disable input field based on radio button

I have a group of radio buttons with the lase option "Other" and an input field type text. By default the input field is disabled, if you click on "Other" radio button the field is then enabled. How do I disable the input field if the select on radio button is changed?

This is my code:

$(document).ready(function(){
     $("#text-inputt").prop('disabled', true)
 });
$("#lastt").click(function(){ $("#text-inputt").prop('disabled', false/true)});

this code is not disabling the input field if you change the radio select.

UPDATE 1 I'm trying this:

 $(document).ready(function(){
     $("#text-inputt").prop('disabled', true);
 });
$("#lastt").click(function(){ 
if($(this).is(':checked')) {
      $("#text-inputt").prop("disabled", false);
  }  else {
      $("#text-inputt").prop("disabled", true);
  }  
});

But is not setting the input to disable if you change the radio button.

Upvotes: 0

Views: 3875

Answers (4)

Pimmol
Pimmol

Reputation: 1871

A solution could be:

  • add a change listener to your radio button group
  • When a radio changes, check its value
  • if the value is 'other', enable the input field.

Working example: https://jsfiddle.net/3afjqe7j/1/

var $input = $('#text-inputt');

$("input[name=my-radios]").on('change', function() {
    var disabled = $(this).val() !== 'other';
    $input.prop('disabled', disabled);
});

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

You can do it like this

 $(document).ready(function(){
    $("#text-inputt").prop('disabled', true);
    $('input[type=radio]').click(function(){
        if($(this).prop('id') == "lastt"){
         $("#text-inputt").prop("disabled", false);
      }else{
        $("#text-inputt").prop("disabled", true);
      }

    });
 });

Upvotes: 1

Tanveer
Tanveer

Reputation: 44

Try this , Here Input box will toggle ie Enable/Disbale

$("#radioBtn").change(function(){
  $("#inputBox").attr("disabled", ! $(this).is(':checked'));    
});

Upvotes: 0

Rohit Kishore
Rohit Kishore

Reputation: 542

change :

$(document).ready(function(){
$("#text-inputt").prop('disabled', true)
});
$("#lastt").click(function(){ $("#text-inputt").prop('disabled', false/true)});

to

 $(document).ready(function(){
 $("#text-inputt").prop('disabled', true)
 });
 $("#lastt").click(function(){
 if($(this).val=='Other')
 {
 $("#text-inputt").prop('disabled', false)
 }
 else
 {
  $("#text-inputt").prop('disabled', true)
 }
 });

Upvotes: 0

Related Questions