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

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">&nbsp; &nbsp; <option value="one">One</option>&nbsp; &nbsp; <option value="two">Two</option>&nbsp; &nbsp; <option value="three">Three</option>&nbsp; &nbsp; <option value="four">Four</option></select><input type = "text" id = "text1" />而JS代码是这样的：$(document).ready(function () {&nbsp; &nbsp; $("#sel_id").change(function () {&nbsp; &nbsp; &nbsp; &nbsp; var x = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; alert("Selected Option other than Three. Input Box is still not Disabled");&nbsp; &nbsp; &nbsp; &nbsp; alert($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; if (x == "three") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Selected Option Three. Input Box is now Disabled");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(text1).attr("disabled", true);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});这里，选择从SELECT中的“三”选项时，只禁用输入文本框。更新 1： 在选择时使用 onchange="myFunction()" 事件以获取文本框的实时更改。