根据下拉选择故障禁用输入字段

时间:2016-03-10 10:33:23

标签: javascript jquery html

<div class="form-group form-animate-text col-lg-6 col-xs-12 col-md-6" >
    <select class="form-text" id="val_equipfc"  name="val_equipfc"  onChange="checkOption(this)" required>
        <option value = "A">Yes</option>
        <option value = "B">No</option>
    </select>
    <span class="bar"></span> 
    <label><span style="color:red">*</span>With Equipment?</span></label>
</div>

这是我的选择类,这是输入字段div

<div class="form-group form-animate-text col-lg-6 col-xs-12 col-md-6" >
    <input type="text" class="form-text" id="val_equipnofc" name="val_equipnofc">
    <span class="bar"></span> 
    <label><span style="color:red">*</span>Number of Equipment/s</label>
</div>

在我点击下拉菜单中的否时禁用输入文本字段的jquery是这样的:

function checkOption(obj) {
    var input = document.getElementById("val_equipnofc");
    input.disabled = obj.value == "B";
}

我想知道出了什么问题,当我搜索如何操作时,我的代码与网上的代码类似,请告诉我有什么问题。

3 个答案:

答案 0 :(得分:1)

首先,您似乎遇到了标记问题(请参阅问题评论)

然后我会用JavaScript添加事件监听器,以避免JS没有被加载的问题

document.getElementById ("val_equipfc").addEventListener ("change", ...)

并使用this关键字访问新值。

请参阅this fiddle

PS:如果您只有“是/否”选项,为什么不使用复选框而不是下拉列表

答案 1 :(得分:1)

这是完整的HTML标记。

请测试一下。这必须奏效。

{"ts":"6260013777081597954"}

产地:

是州:

enter image description here

无状态:

enter image description here

答案 2 :(得分:0)

如果您使用的是Jquery,那么您就可以这样做

$(document).ready(function(){
  $('#val_equipfc').change(function(){
    $('#val_equipnofc').prop('disabled', $(this).val() == "B");
  });
});

在这里工作JSFiddle https://jsfiddle.net/k4k24tq2/1/