选择某个选项时如何使输入列只读？

Question

在选择选项与关键字匹配时，将输入表更改为“readonly”。我只想在选择关键字时禁用某些选项卡。脚本：<script>function block_SN(){    var selects = document.querySelectorAll("select[id=select_host]");    var serials = document.querySelectorAll("select[id=serial_number]");    for (var index = 0; index < selects.length -1; index++) {        if (selects[index].value.match(/keyword/))        serials[index].readOnly = true;    }    }</script>HTML：<div class="form-group">    <input id="serial_number" name="serial_number" value="{{entry.serial_number}}" ></div></td><td>    <div class="form-group">        <select id="select_host" name="select_host" class="selectpicker form-control" value="{{entry.hostname}}" onChange="this.form.submit();block_SN()">        {% for entry in hosts %}        <option value="{{entry.hostname}}">{{entry.hostname}}</option>        {% endfor %}        <option selected="selected">{{entry.hostname}}</option>        </select>    </div></td>

Answer 1

对于这个 HTML 代码是这样的：

<select id="sel_id">

    <option value="one">One</option>

    <option value="two">Two</option>

    <option value="three">Three</option>

    <option value="four">Four</option>

</select>

<input type = "text" id = "text1" />

而JS代码是这样的：

$(document).ready(function () {

    $("#sel_id").change(function () {

        var x = $(this).val();

        alert("Selected Option other than Three. Input Box is still not Disabled");

        alert($(this).val());

        if (x == "three") {

            alert("Selected Option Three. Input Box is now Disabled");

            $(text1).attr("disabled", true);

        }

    });

});

这里，选择从SELECT中的“三”选项时，只禁用输入文本框。

更新 1： 在选择时使用 onchange="myFunction()" 事件以获取文本框的实时更改。