CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
Helgus
Helgus

Reputation: 177

enable\disable elements by radiobuttons

suppose, I have some content, which i want to fill in, based on radiobuttons, for instance if i click one radiobutton, 3 textareas(or inputs) become active and i can fill them in and the textarea, which "belongs" to other radiobutton, becomes inactive and i can't fill it in and vice versa.

<form>
    <input type="radio" name="group1" value="1"> val1<br> 

    <input type="radio" name="group1" value="2" checked> val2<br>

    <input type="text" value="123123" id="id1">
    <input type="text" value="123123" id="id2">
    <input type="text" value="123123" id="id3">
    <input type="text" value="123123" id="id4">
</form>

the question is, how to ,f.e., with active val1 radiobutton enable inputs id1,id2,id3 and with val2 enable id4 and disable id1,id2,id3

Upvotes: 0

Views: 6149

Answers (6)

Mr_DeLeTeD
Mr_DeLeTeD

Reputation: 846

you can make all that you want with the event: 

onChange="myJQueryFunction()"

on your input radio

After you just have to: 

$('id').attr('disabled','disabled');

or:

$('id').removeAttr('disabled');

on your jquery code

Upvotes: 0

Ram
Ram

Reputation: 144689

Try this:

$('input[name=group1]').change(function(){
    if (this.value == 1) {
       $('#id1, #id2, #id3').prop('disabled', false)
       $('#id4').prop('disabled', true)
    } else {
       $('#id1, #id2, #id3').prop('disabled', true)
       $('#id4').prop('disabled', false)
    }
})

DEMO

Upvotes: 2

Shyju
Shyju

Reputation: 218722

I would group the textareas/inputs belongs to a specific radio button under a div so taht i can select it easily and will give an id to the div which can be relate with the radio button ( here my Div id is in the format of "area-"+ radioButtonValue 

<input type="radio" name="group1" value="1"> val1<br>
<input type="radio" name="group1" value="2"> val2<br>

<div  id="area-1" class="area">
    <input type="text" value="123123" id="id1">
    <input type="text" value="123123" id="id2">
    <input type="text" value="123123" id="id3">
</div>
<div id="area-2"  class="area">    
    <p>Selcond</p>
    <input type="text" value="123123" id="id4">
</div>

And the script is

$(function(){
   $("div.area").hide();
    $("input[type=radio]").click(function(){        
      var val=$(this).val();
      $(".area").hide();    
      $("#area-"+val).show();        
    });      
});

This will work for n number of radio buttons and its areas (contains textarea/input/other elements) as long as you follow the naming convention to relate a radio button with it's area.

Working sample : http://jsfiddle.net/zSeYW/

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this - http://jsfiddle.net/h7ZYY/

$("input:text").prop("disabled", true);
$("input:radio").on("click", function() {
    $("input:text").prop("disabled", true);
    $("input.group" + $(this).val()).prop("disabled", false);
});

Upvotes: 2

indiPy
indiPy

Reputation: 8062

To disable text box you can write up,

   document.getElementById(textBoxID).disabled = True/False

Obviously you need onclick event,

<input type="radio" name="group1" value="1" onclick ="EnableDisable(this);">
function EnableDisable(e) {
      $('text1').attr("disabled", !e.checked);
  }

Upvotes: 1

Adri&#224; Vilanova
Adri&#224; Vilanova

Reputation: 384

You can disable all the inputs by <input type="text" value="123123" id="id1" disabled="disabled">

And then, with Javascript you can do this:

<script>
function disable(input)
{
if (input == "2")
{
document.getElementById('id1').disabled = true;
document.getElementById('id2').disabled = true;
document.getElementById('id3').disabled = true;
document.getElementById('id4').disabled = false;
}
else
{
document.getElementById('id1').disabled = false;
document.getElementById('id2').disabled = false;
document.getElementById('id3').disabled = false;
document.getElementById('id4').disabled = true;
}
}
</script>

<form>
    <input type="radio" name="group1" value="1" onclick='disable('1');'> val1<br> 

    <input type="radio" name="group1" value="2" onclick='disable('2')'> val2<br>

    <input type="text" value="123123" id="id1" disabled="disabled">
    <input type="text" value="123123" id="id2" disabled="disabled">
    <input type="text" value="123123" id="id3" disabled="disabled">
    <input type="text" value="123123" id="id4" disabled="disabled">
</form>

Upvotes: 1

Related Questions