Question

我有一个事件，根据radio元素中选择的值，我的某些输入元素将被禁用。

这是我的代码。

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);）时，它仍然可用。

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

我在这里错过了什么吗？感谢。

顺便说一下。我使用MaterialiseCSS作为我的CSS框架。和jquery-3.2.1。

Answer 1

问题在于 Materialise 的工作原理（它隐藏了实际的select并使用ul和li标记来设置样式。因此，正如您必须使用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">

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

1 个答案: