Question

我有这个下拉列表有4个选项。

我想要实现的是当用户从下拉列表中选择number或option3时，将输入文字option4的属性更改为只读。

<select id="s_id">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

number: <input type="text" name="number">

这是我现在的脚本，它的作用就是提醒所选的值。

$(document).ready(function () {
    $("#s_id").change(function () {
        var x = $(this).val();
        alert($(this).val());
        if (x == opel) {
            alert("iff");
            $(this).attr("readOnly", "true");
        }
    });
});

JS Fiddle link

任何想法都会非常感激！

Answer 1

您只需检查.value处理程序中的change并使用jQuery .prop方法：

$("#s_id").change(function () {
  var isReadonly = (this.value === 'option3' || this.value === 'option4');
  $("input[name='number']").prop('readonly', isReadonly);
});

或使用数组使以后更容易修改它：

$("#s_id").change(function () {
  var isReadonly = ['option3', 'option4'].indexOf(this.value) > -1;
  $("input[name='number']").prop('readonly', isReadonly);
});

以下是工作 JSFiddle demo 。

Answer 2

使用prop()设置文本框的只读属性。

创建下拉列表中所有值的数组，选中后，应禁用数字文本框。
检查所选值是否在change事件处理程序
如果阵列中存在所选选项值，请禁用数字文本框，否则启用它

Demo

＆＃13;

$(document).ready(function() {
  // Values when selected, the number box should be disabled
  var values = ['option2', 'option3'];

  // On selection change of the dropdown
  $("#s_id").change(function() {
    // values.indexOf($(this).val()) > -1
    // Checks if the value selected is from the array
    // Comparison returns true when the value is in array, false otherwise
    $('input[name="number"]').prop('readonly', values.indexOf($(this).val()) > -1);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="s_id">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

number:
<input type="text" name="number">

＆＃13;

Answer 3

使用prop制作readonly并将其删除

<强> DEMO

$(document).ready(function () {
    $("#s_id").change(function () {
    if (this.value === 'option3' || this.value === 'option4')
        $("input[name='number']").prop('readonly', true);
    else
        $("input[name='number']").prop('readonly', false);//enable it back again
    });
});

Answer 4

请尝试以下代码： -

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

我认为下拉总是只读。您可以做的是禁用它

如果您使用表单，则禁用的字段不会提交，因此请使用隐藏字段存储已禁用的下拉列值

Answer 5

请使用此功能，您也可以动态使用它

下面给出HTML代码

<select id="s_id">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

number: <input type="text" id="number" name="number">

下面给出了JQuery代码

$(document).ready(function () {
    $("#s_id").change(function () {
        var option_Array = ["option3","option4"]
        var x = $(this).val();
        $("#number").prop('readonly', false);
        for(var i=0; i<option_Array.length; i++){
           if (x == option_Array[i]){             
             $("#number").prop('readonly', true);
             }
        }       
    });
});

当下拉值更改时，将属性设置为只读

5 个答案: