jquery - 使用 JQuery 禁用带有条件的动态 HTML 元素

Question

我有以下两个html元素

<div class="col-sm">
  <label for="numberOfShiftPerDay">Number of Shift Per Day</label>
  <input type="number" class="form-control" id="numberOfShiftPerDay" name="numberOfShiftPerDay" placeholder="No: of Shift Per Day" title="Please key in how many number of shift per day" min="1" max="4">
</div>

第二个元素是使用一些 php for 循环创建的

<div class="form-group">
  <div class="row">
    <?php
        for($loop = 1; $loop<=4; $loop++){
            echo '<div class="col-sm">
                      <label>Shift '.$loop.' Duration</label>
                        <select class="form-control" id="shift'.$loop.'Duration" name="shift'.$loop.'Duration">
                            <option>8</option>
                            <option>12</option>
                        </select>
                    </div>';
        }            
     ?>
  </div>
</div>

我需要的

当有人更改第一个选项元素时，我需要根据某些条件禁用第二个元素。因此，我编写了以下 JQuery

$("#numberOfShiftPerDay").change(function() {
  if ($("#numberOfShiftPerDay").html == "1") {
    $("#shift1Duration").attr("disabled");
  }

});

但不知何故，它并没有禁用。有人能帮我吗？

标签： jqueryhtml

Answer 1

您应该使用 jQuery 方法“val()”来获取输入中的“文本”，而不是 html()。然后，您可以使用以下任一方法来禁用值更改时的“输入”。

$("#numberOfShiftPerDay").change(function() { 
   $(this).attr('disabled', $(this).val() == "1");
});

或者

$("#numberOfShiftPerDay").change(function() { 
   $(this).prop('disabled', $(this).val() == "1");
});