Question

我有一张表格。

<form action="#" method="POST">
  <select id="packageId">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
  </select>
  <select id="duration">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</form>

我想首先将ID持续时间设置为disabled = true的Select标记。
当用户对ID为packageId的选择标记进行更改并且值为1时，请删除选择标记上已禁用的ID持续时间。
当用户对ID为packageId的Select标记进行另一次更改并且该值返回到零时，使具有ID持续时间的Selec标记已禁用。

这是我的jquery：

$(document).ready(function() {
  $(document).on('change','#packageId', function() {
    if($(this).val() === '0') {
      $("#duration").attr('disabled', true);
    } else {
      $("#duration").attr('disabled', false);
    }
  });
});

这个Jquery最初不能设置disabled = true。我必须单击选项1，然后返回选项0以使其变为静止。有人能帮助我吗？

Answer 1

对于最初设置禁用状态，您需要在添加更改处理程序后触发更改事件。

如果未动态添加select元素，则无需使用事件委派

$(document).ready(function () {
    $('#packageId').on('change', function () {
        $("#duration").prop('disabled', $(this).val() != '1');
    }).trigger('change');
});

演示：Fiddle

如果动态添加元素，则需要在添加select元素后触发更改事件

$(document).ready(function () {
    $(document).on('change', '#packageId', function () {
        $("#duration").prop('disabled', $(this).val() != '1');
    })
    //then once the select elements are added trigger the event
    $('#packageId').trigger('change');
});

演示：Fiddle

Answer 2

使用.prop()

＆＃13;

$(document).ready(function() {
  $(document).on('change', '#packageId', function() {
    if ($(this).val() === '0') {
      $("#duration").prop('disabled', true);
    } else {
      $("#duration").prop('disabled', false);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="POST">
  <select id="packageId">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
  </select>
  <select id="duration">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</form>

＆＃13;

Jquery在表单中禁用了select标签

2 个答案: