javascript在下拉值更改时设置属性只读[重复]答案

【问题标题】：javascript to set attribute readonly on dropdown value change [duplicate]javascript在下拉值更改时设置属性只读[重复]
【发布时间】：2013-07-26 16:51:38
【问题描述】：

在从下拉列表中选择值时，如果选择的值等于某个值，我希望下拉列表更改为只读，我该怎么做？

HTML：

<select id="s_id">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option></select>

脚本：

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

小提琴：http://jsfiddle.net/L4reds/xKQUd/2/

【问题讨论】：

首先，您需要在值条件周围添加引号：if (x === "opel")...。其次，更重要的是，select 元素不能成为readonly。它们可以是disabled，但它们的值不会与表单数据一起发送。
“只读”是指无法选择该值？
你的行if (x == opel) {，变量opel是undefined。您可能想与 String 进行比较； if (x == 'opel') {
也使用prop而不是attr

标签： javascript jquery drop-down-menu

【解决方案1】：

您需要将x 与"opel" 的字符串进行比较，您可以使用属性disabled，请参见此处的小提琴：http://jsfiddle.net/xKQUd/3/

澄清一下：select元素不能设置为readOnly，需要使用disabled属性

要解决不发送到服务器的问题，请设置一个隐藏输入，该值等于将在表单提交时发送的禁用值，请在此处查看此小提琴：http://jsfiddle.net/xKQUd/25/

【讨论】：

还有一个更大的问题是不能将select 元素设为readonly。
这就是为什么我说要使用 disabled 属性
但这意味着选择的值永远不会发送到服务器，这可能与 OP 的要求相反。 disabled 不是一个可行的选择。
正是我想要的......优秀的答案。你似乎知道。

【解决方案2】：

在您的代码中，您将opel 用作variable。但它不是variable，而是string。所以你需要把它当作一个字符串（单引号或双引号）。

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

Try this jsfiddle

或者取一个变量var opel = "opel";。

Try jsfiddle

【讨论】：

【解决方案3】：

Select 没有 attr ReadOnly - 而可以是 disabled 所以你的代码：

$(document).ready(function () {
    $("#s_id").change(function () {
        var x = $(this).val();
        //alert("something's changed");
        alert($(this).val());
        alert("x=======" +x);
        if (x == "opel") {
            alert("iff");
           // $(this).attr("readOnly", "true");
            $(this).attr('disabled',true);
        }
    });
});

btw open 不是变量，而是值，所以需要用引号引起来 "opel" 和小提琴：http://jsfiddle.net/xKQUd/5/

【讨论】：

【解决方案4】：

Select 元素不能设置为readonly，但可以改为disabled。但在这种情况下，它们的值不会与form 一起提交。

这里有两个选择。

一种是用选中的值设置一个hidden input，然后禁用select：

$(document).ready(function () {
   $("#s_id").on("change", function () {
       if ($(this).val() === "opel") {
           $("#myHiddenField").val($(this).val());
           $(this).attr("disabled", "disabled");
       }
   });
});

另一个是从select 中删除所有其他选项，只留下选定的选项：

$(document).ready(function () {
   $("#s_id").on("change", function () {
     if ($(this).val() === "opel") {
         $(this).children("option").each(function() {
            if (this.value != "opel")
               this.remove();
         });
     }
   });
});

现在由你决定。

【讨论】：

【解决方案5】：

试试

if (x == 'opel') {
        alert("iff");
        $(this).attr("disabled", "true");
    }

FIDDLE Demo

【讨论】：

【解决方案6】：

试试这个，

if (x == "opel") {

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

【讨论】：

【解决方案7】：

试试下面的代码：

<select id="s_id">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
 </select>

jQuery 代码：

$(document).ready(function () {
$("#s_id").change(function () {
 var x = $(this).val();    
 if (x == 'opel') {
     $(this).attr('disabled','disabled');
}
});
});

http://jsfiddle.net/Ea6NN/

【讨论】：

【解决方案8】：

你在这里http://jsfiddle.net/SteveRobertson/xKQUd/24/

      $(document).ready(function () {
          y=1;
          $("#s_id").change(function () {
             var x = $(this).val();
    //alert("something's changed");


             if (x == "opel" && x!=y) {           
                y=x;
                $("#s_id").prop("disabled", true).change();            
    }
});

});

【讨论】：