javascript - enabledisable elements by radiobuttons - Stack Overflow

admin管理员组

文章数量:1332383

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) bee active and i can fill them in and the textarea, which "belongs" to other radiobutton, bees 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

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) bee active and i can fill them in and the textarea, which "belongs" to other radiobutton, bees 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

• javascript
• jquery
• html
• radio-button

Share Improve this question Follow edited Jul 24, 2012 at 13:52 Helgus asked Jul 24, 2012 at 13:40 HelgusHelgus 17733 gold badges77 silver badges1717 bronze badges 5

• @Raminson the question is: "how to hide/show or (enable/disable) parts of form based on radio button selection." – Peter Pajchl Commented Jul 24, 2012 at 13:46
• @Raminson I am aware of the fact that there is no textarea present in the provided code snippet. I simply generalised the intention. – Peter Pajchl Commented Jul 24, 2012 at 13:48
• @Raminson - the question posted is not my question; in my previous ment, I only tried to translate it to something more sensible. IMO all this person is looking for, is how get "checked" index of radio button and based on that modify display of the form... – Peter Pajchl Commented Jul 24, 2012 at 13:52
• @Raminson read the question attentively - i wrote textarea or input, and wrote code just for sample – Helgus Commented Jul 24, 2012 at 13:57
• guys, variants are coreect, so i'll match the answer, whcih i liked most. – Helgus Commented Jul 24, 2012 at 14:18

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

Try this - http://jsfiddle/h7ZYY/

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

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

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>

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

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/zSeYW/

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

本文标签： javascriptenabledisable elements by radiobuttonsStack Overflow