jQuery prop函数在Change事件处理程序中不起作用

Question

我有一个事件，其中某些输入元素将被禁用，具体取决于在单选元素中选择的值。

这是我的代码。

HTML代码

<input name="choice" type="radio" id="choice1" value="firstChoice" checked />
<label for="choice1">First Choice</label>

<input name="choice" type="radio" id="choice2" value="secondChoice" />
<label for="choice2">Second Choice</label>

<input name="choice" type="radio" id="choice3" value="thirdChoice" />
<label for="choice3">Third Choice</label>

<select id="selectTest" name="selectTest" required>
  <option value="selectTest1">Test1</option>
  <option value="selectTest2">Test2</option>
  <option value="selectTest3">Test3</option>
</select>

<input id="inputTest" type="text" class="validate" required name="inputTest">

jQuery代码

$("input[name=choice]:radio").on("change",function(){

    if($("input[name=choice]:checked").val()==="secondChoice"){
        $("#inputTest").prop("disabled",true); //this works
        $("#selectTest").prop("disabled",true); // this not
    } else {
        //Do Something Else
    }
});

问题是$("#selectTest").prop("disabled",true); 不起作用。 当我在无线电输入上选择secondChoice而另一个被禁用时（（ $("#inputTest").prop("disabled",true); ） $("#inputTest").prop("disabled",true);该功能仍然可用。

我试图移动$("#selectTest").prop("disabled",true); 在事件更改处理程序之外，它似乎可以正常工作。

我在这里想念什么吗？ 谢谢。

顺便说一句。 我正在使用MaterializeCSS作为我的CSS框架。 和jquery-3.2.1。

Answer 1

问题在于Materialize的工作方式（它隐藏了实际的select并使用ul和li标签对其进行样式设置）。 因此，就像您必须使用$('select').material_select(); 加载 select框一样$('select').material_select(); ，您必须重新加载 select框才能显示更改。

为此，只需添加$('select').material_select(); 您的功能：

$(document).ready(function() {
  $('select').material_select(); // initial select load

  $("input[name=choice]:radio").on("change", function() {
    if ($("input[name=choice]:checked").val() === "secondChoice") {
      $("#inputTest").prop("disabled", true);
      $("#selectTest").prop("disabled", true);
    } else {
      $("#inputTest").prop("disabled", false);   // restore input
      $("#selectTest").prop("disabled", false);  // restore select
    }

    $('select').material_select(); // reload select to show changes
  });
});

检查以下工作片段：

 $(document).ready(function() { $('select').material_select(); // initial select load $("input[name=choice]:radio").on("change", function() { if ($("input[name=choice]:checked").val() === "secondChoice") { $("#inputTest").prop("disabled", true); $("#selectTest").prop("disabled", true); } else { $("#inputTest").prop("disabled", false); // restore input $("#selectTest").prop("disabled", false); // restore select } $('select').material_select(); // reload select to show changes }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> <input name="choice" type="radio" id="choice1" value="firstChoice" checked /> <label for="choice1">First Choice</label> <input name="choice" type="radio" id="choice2" value="secondChoice" /> <label for="choice2">Second Choice</label> <input name="choice" type="radio" id="choice3" value="thirdChoice" /> <label for="choice3">Third Choice</label> <select id="selectTest" name="selectTest" required> <option value="selectTest1">Test1</option> <option value="selectTest2">Test2</option> <option value="selectTest3">Test3</option> </select> <input id="inputTest" type="text" class="validate" required name="inputTest">