web-dev-qa-db-ja.com

ドロップダウン値の変更時に属性を読み取り専用に設定するJavaScript

ドロップダウンから値を選択するときに、選択した値が特定の値と等しい場合、ドロップダウンを読み取り専用に変更したいのですが、どうすればよいですか？

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/

javascriptjquerydrop-down-menu
6
L4reds

xを"opel"の文字列と比較する必要があり、属性disabledを使用できます。ここでフィドルを参照してください： http://jsfiddle.net/xKQUd/ 3 /

明確にするため：select要素はreadOnlyに設定できません。disabled属性を使用する必要があります

サーバーに送信されない問題を回避するには、代わりにフォーム送信時に送信される無効な値に等しい非表示の入力を設定します。ここでこのフィドルを表示します： http://jsfiddle.net/xKQUd/25/

12
verbanicm

コードでは、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");
        }
    });
});

このjsfiddleを試してください

または変数var opel = "opel";を取ります。

jsfiddleを試す

2
Ishan Jain

SelectにはattrReadOnlyがありません-代わりに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/

1
Elen

Select要素はreadonlyに設定できませんが、代わりにdisabledを設定できます。ただし、この場合、値はformとともに送信されません。

ここには2つのオプションがあります。

1つは、選択した値でhidden inputを設定し、selectを無効にすることです。

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

もう1つは、selectから他のすべてのオプションを削除して、選択したオプションのみを使用可能にすることです。

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

それはあなた次第です。

1
melancia

以下のコードをお試しください：

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

0
Nitin Chaurasia

これが 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();            
    }
});

}）;

0
Four_lo

試す

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

FIDDLEデモ

0
Neeraj Dubey

これを試して、

if (x == "opel") {

            $(this).attr("disabled", "disabled");
        }
0
Jeet Bhatt