How to disable a input field according to another select field value in bootstrap?

Question

I am using bootstrap, I wanted to know is there something like a feature in bootstrap to do this?

<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Flooring material </label>
<div class="col-sm-6">
<select class="form-control" name="flooring_meterial">
<option value="0">-Select-</option>
<option value="1" >Earth,sand</option>
<option value="2">Dung</option>
<option value="3">Wood/planks</option>
<option value="4">Parquet or polished wood</option>
<option value="5">other</option>
 </select>
<input type="text" placeholder="Other" class="form-control" name="f_m_other">
</div>
</div>

I want to activate this bellow input field, if the above select field value is "other"

I haven't done any javascript, Because I wanted to know, Is there a short cut feature in Bootstrap to tackle this. — Dinidu Hewage, Sep 20 '15 at 14:57
@Dinidu Is requirement to enable or disable `input` if `select` value is `"5"` ? — guest271314, Sep 20 '15 at 15:02
I want to enable when it is 5. But I was expecting a thing like a class in bootstrap to do this. — Dinidu Hewage, Sep 20 '15 at 15:39
@Dinidu _"was expecting a thing like a class in bootstrap to do this"_ `input` element is disabled using `disabled` attribute ; Bootstrap would still have to add `disabled` attribute internally after class added , removed. Could set `disabled` attribute directly . See updated post , http://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap — guest271314, Sep 20 '15 at 16:10
@ guest271314 Yes I saw this, But its not related to select elements. As i feel my scenario is pretty much common one. Most of select lists ended up with the option "other" and giving a input field to add the other value. So I thought there may be a solution for this in bootstrap. Your answer is not working with my jsp. The other thing i have 5 of these kind of select lists, so i want a common solution for all these five fields. — Dinidu Hewage, Sep 20 '15 at 16:27

score 1 · Accepted Answer · answered Sep 21 '15 at 17:02

Since I could not able to find a short cut for this using bootstrap, I thought to write this in native javascript.

            function disable(select_val,input_id) {
                var e = document.getElementById(select_val);
                var strUser = e.options[e.selectedIndex].value;
                if(strUser === "100"){
                    document.getElementById(input_id).disabled = false;
                }
                else{
                    document.getElementById(input_id).value = document.getElementById(input_id).defaultValue;
                    document.getElementById(input_id).disabled = true;
                }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Principle mode of water supply</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="water_supply" onchange="disable('water_supply', 'w_s_other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="4">Private pipe line</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>                          
</select>
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="w_s_other" disabled value="">
</div>
</div> 
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">x2</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="x2" onchange="disable('x2', 'x2other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>                          
</select>
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="x2other" disabled value="">
</div>
</div>

guest271314 · Answer 2 · 2015-09-20T16:05:06.083

0

Try using change event at select element to set input disabled to true if value of select element is "5" with .prop()

$("select").change(function() {
  $("+ input", this).prop("disabled", !(this.value === "5"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Flooring material </label>
<div class="col-sm-6">
<select class="form-control" name="flooring_meterial">
<option value="0">-Select-</option>
<option value="1" >Earth,sand</option>
<option value="2">Dung</option>
<option value="3">Wood/planks</option>
<option value="4">Parquet or polished wood</option>
<option value="5">other</option>
 </select>
<input type="text" placeholder="Other" class="form-control" name="f_m_other" disabled="true">
</div>
</div>

edited Sep 20 '15 at 16:05

answered Sep 20 '15 at 14:59

guest271314

1
15
104
177

I think the OP wants it the other way around tbh - NOT disabled if `other` is chosen - didn't want to do the same as you but in reverse, easier for you to amend – StudioTime Sep 20 '15 at 16:09
@DarrenSweeney _"I think the OP wants it the other way around tbh - NOT disabled if other is chosen"_ Yes. `js` at above should enable `input` element when value from `select` is `"5"` . See http://stackoverflow.com/users/1615830/dinidu _"want to enable when it is 5. But I was expecting a thing like a class in bootstrap to do this."_ – guest271314 Sep 20 '15 at 16:11
No, it needs javascript to read the value of the select as the user changes it, CSS cannot do that – StudioTime Sep 20 '15 at 16:14

How to disable a input field according to another select field value in bootstrap?

2 Answers2