根据下拉选择问题禁用输入字段

Question

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

This is my select class and this is the input field 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>

The jquery in disabling input text field as I clicked No in the dropdown menu is this: 我在下拉菜单中单击“否”时禁用输入文本字段的jQuery如下：

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

I wonder what's wrong, when I searched for how to do it, my code is similar in those on the net please tell me what's wrong. 我想知道出什么问题了，当我搜索如何做时，我的代码与网上的代码相似，请告诉我出了什么问题。

Answer 1

First of all you seem to have a markup problem (see Question comments) 首先，您似乎有一个标记问题（请参阅问题注释）

Then I would add the event listener with JavaScript to avoid having problems with JS not being loaded 然后，我将使用JavaScript添加事件监听器，以避免出现无法加载JS的问题

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

and access the new value using the this keyword. 并使用this关键字访问新值。

see this fiddle 看到这个小提琴

PS: Why not use a Checkbox instead of a Dropdown if you only have a Yes/No option PS：如果只有“是/否”选项，为什么不使用复选框而不是下拉菜单

Answer 2

This is the full HTML Markup. 这是完整的HTML标记。

Please test it. 请测试一下。 This has to work. 这必须工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This should work</title>
</head>
<body>
    <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?</label>
    </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>

    <script type="text/javascript">
        function checkOption(obj) {
            var input = document.getElementById("val_equipnofc");
            input.disabled = obj.value == "B";
        }
    </script>
</body>
</html>

Produces: 产生：

Yes state: 是的状态：

No state: 无状态：

Answer 3

If you are using Jquery then you can do it like this 如果您使用的是Jquery则可以这样做

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

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

根据下拉选择问题禁用输入字段

问题描述

3 个解决方案

解决方案1
1 2016-03-10 10:53:12

解决方案2
1 2016-03-10 11:45:46

解决方案3
0

根据下拉选择问题禁用输入字段

问题描述

3 个解决方案

解决方案1 1 2016-03-10 10:53:12

解决方案2 1 2016-03-10 11:45:46

解决方案3 0

解决方案1
1 2016-03-10 10:53:12

解决方案2
1 2016-03-10 11:45:46

解决方案3
0