Looking for Javascript function to disable fields on specified select-option [duplicate]

Question

I need a general javascript function which disables / enables fields on specified select options.

<select name="form">
 <option value="1">everything enabled</option>
 <option value="2">disable form-input 1 and 2</option>
 <option value="3">disable form-input 3, 4 and 5</option>
</select>

So input forms 1 and 2 should be disabled when option 2 is selected and so on. The function must be written general so that the option-value as well as the fields to be disabled must be given to the function via variable / array.

Any idea?

Thanks, Henning

It's already answered here: stackoverflow.com/questions/2155909/… — Leonardo Lanchas
– Leonardo Lanchas, Commented Aug 9, 2014 at 10:26
Is this what you want? jsfiddle.net/ada3awfo It's not the actual answer I just created it for your confirmation — Nipuna
– Nipuna, Commented Aug 9, 2014 at 10:47

Nipuna · Accepted Answer · 2014-08-09 11:02:14Z

HTML

<select name="form" id="selector">
    <option value="1">everything enabled</option>
    <option value="2">disable form-input 1 and 2</option>
    <option value="3">disable form-input 3, 4 and 5</option>
</select>
<br/>
<input type="text" id="input1" class="inputs" />
<br/>
<input type="text" id="input2" class="inputs"  />
<br/>
<input type="text" id="input3" class="inputs"  />
<br/>
<input type="text" id="input4" class="inputs"  />
<br/>
<input type="text" id="input5" class="inputs"  />

JavaScript

(function () {
    $('#selector').on('change', function (val) {
        var selectedVal = $(this).val();
        if (selectedVal == "1") {
            $('.inputs').removeAttr("disabled");
        } else if (selectedVal == "2") {
            $('inputs').removeAttr("disabled");
            $('#input1').attr("disabled", "disabled");
            $('#input2').attr("disabled", "disabled");
        } else if (selectedVal == "3") {
            $('.inputs').removeAttr("disabled");
            $('#input3').attr("disabled", "disabled");
            $('#input4').attr("disabled", "disabled");
            $('#input5').attr("disabled", "disabled");
        }
    });


})();

Here I have used JQuery to do things easily. You can achieve this with pure JavaScript too. I used .inputs class so that I can revert disable attribute easily

Suganth G · Accepted Answer · 2014-08-09 11:05:56Z

Use this:

 <select id="Drp" name="form">
     <option value="1">everything enabled</option>
     <option value="2">disable form-input 1 and 2</option>
     <option value="3">disable form-input 3, 4 and 5</option>
    </select>
<input type="text" id="form-input1" />
<input type="text" id="form-input2" />
<input type="text" id="form-input3" />
<input type="text" id="form-input4" />
<input type="text" id="form-input5" />

Script

$("#Drp").change(function(){
var value = $("#Drp").val();
if(value==1){
$("input").prop('disabled', false);
}else if(value==2){
$("#form-input1,#form-input2").prop('disabled', true);
$("#form-input3,#form-input4,#form-input5").prop('disabled', false);
} else if(value==3){
$("#form-input1,#form-input2").prop('disabled', false);
$("#form-input3,#form-input4,#form-input5").prop('disabled', true);
}
});

Hope this may useful

Collectives™ on Stack Overflow

Looking for Javascript function to disable fields on specified select-option [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related