如何根据bootstrap中的另一个select字段值禁用输入字段?

时间:2015-09-20 14:54:06

标签: html twitter-bootstrap

我正在使用bootstrap,我想知道是否有类似于bootstrap中的功能来执行此操作?



<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>
&#13;
&#13;
&#13;

如果上面的选择字段值为&#34;其他&#34;

,我想激活此波纹管输入字段

1 个答案:

答案 0 :(得分:0)

由于我无法使用bootstrap为此找到一个捷径,我想用本机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>