Jquery 使用nextuntil禁用和启用select表单元素

我试图在选中一个单选按钮时激活一组选择下拉列表，在选中另一个单选按钮时停用

jQuery:

$(':radio[name!="hours"]').change(function() {
  if ($(this).filter(':checked').val() == "open") {
    $(this).nextUntil("input","select").attr("disabled", false);
  } else {
    $(this).nextUntil("input","select").attr("disabled", true);
  }
});

<form id="providerForm">
  <p><input type="radio" name="hours" value="no" checked="true"> There are no hours at this location</p>
  <p><input type="radio" name="hours" value="yes"> Enter the hours below</p>
  <span id="hoursList">
    <p><label for="monday">Monday: </label><span class="radios"><input type="radio" name="monday" value="closed"/> Closed</span>
    <span class="radios"><input type="radio" name="monday" value="open"/> Open <select name="monStart" id="monStart" disabled></select> to <select name="monEnd" id="monEnd" disabled></select></span></p>
    <p><label for="tuesday">Tuesday: </label><span class="radios"><input type="radio" name="tuesday" id="tueClosed" value="closed"/> Closed</span>
    <span class="radios"><input type="radio" name="tuesday" value="open"/> Open <select name="tueStart" id="tueStart" disabled></select> to <select name="tueEnd" id="tueEnd" disabled></select></span></p>
  </span>
  <input type="submit" id="loginButton" name="submit" value="Add Hours" />
</form>

HTML:

$(':radio[name!="hours"]').change(function() {
  if ($(this).filter(':checked').val() == "open") {
    $(this).nextUntil("input","select").attr("disabled", false);
  } else {
    $(this).nextUntil("input","select").attr("disabled", true);
  }
});

<form id="providerForm">
  <p><input type="radio" name="hours" value="no" checked="true"> There are no hours at this location</p>
  <p><input type="radio" name="hours" value="yes"> Enter the hours below</p>
  <span id="hoursList">
    <p><label for="monday">Monday: </label><span class="radios"><input type="radio" name="monday" value="closed"/> Closed</span>
    <span class="radios"><input type="radio" name="monday" value="open"/> Open <select name="monStart" id="monStart" disabled></select> to <select name="monEnd" id="monEnd" disabled></select></span></p>
    <p><label for="tuesday">Tuesday: </label><span class="radios"><input type="radio" name="tuesday" id="tueClosed" value="closed"/> Closed</span>
    <span class="radios"><input type="radio" name="tuesday" value="open"/> Open <select name="tueStart" id="tueStart" disabled></select> to <select name="tueEnd" id="tueEnd" disabled></select></span></p>
  </span>
  <input type="submit" id="loginButton" name="submit" value="Add Hours" />
</form>

在这个地方没有时间

在下面输入小时数

星期一：休息
开放给

星期二：闭馆
开放给

小提琴在这里：

---

点击“打开”即可启用选择框，这很好。但是，单击“关闭”后，它们不会再次禁用。我哪里出错了？

您正在过滤单个无线电输入（选中了

）而不是无线电组，

nextuntil

只选择与当前标记不起作用的选定元素的下一个同级。对于修改属性，也应使用

prop

方法，而不是

attr

。试试这个：

$('input[type=radio][name!="hours"]').change(function() {
    $(this).closest('p') // select the closest parent `p` element
           .find('select') // find `select` elements
           .prop("disabled", this.value === 'closed'); // disable/enable the selects  
});

---

您正在过滤单个无线电输入（选中了

）而不是无线电组，

nextuntil

仅选择与当前标记不起作用的选定元素的下一个同级。对于修改属性，也应使用

prop

方法，而不是

attr

。试试这个：

$('input[type=radio][name!="hours"]').change(function() {
    $(this).closest('p') // select the closest parent `p` element
           .find('select') // find `select` elements
           .prop("disabled", this.value === 'closed'); // disable/enable the selects  
});

---

太棒了，谢谢！你有没有理由把$（'：radio[name！=“hours”]”改为$（'input[type=radio][name！=“hours”]”），因为它们都做同样的事情？@CMH不客气，

input[type=radio]

比

：radio

选择器快。我只是喜欢使用

标记[属性]

选择器，没有具体原因。太棒了，谢谢！你有没有理由把$（'：radio[name！=“hours”]”改为$（'input[type=radio][name！=“hours”]”），因为它们都做同样的事情？@CMH不客气，

input[type=radio]

比

：radio

选择器快。我只是喜欢使用

标记[attribute]

选择器，没有具体原因。