Question

这是我的HTML表单结构：

编辑：每个部分都是由PHP脚本生成的，部分ID将根据用户输入而改变。因为这个

，我无法使用整个选择器

<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
    <input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
    <input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
    <br>Food:
    <input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
    <input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
    <select id="Meal[]" disabled>
        <option value=""></option>
        <option value="Chicken">Chicken</option>
        <option value="Beef">Beef</option>
        <option value="Vegetarian">Vegetarian</option>
        <option value="Other">Other</option>
    </select>
</div>
<div style="clear: both; height: 5px;">&nbsp;</div>

<section id="JohnSmith">
    <div class="gcolumn1">JohnSmith</div>
    <div class="gcolumn2">Color:
        <input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
        <input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
        <br>Food:
        <input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
        <input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
    <div class="gcolumn3">
        <select id="Meal[]" disabled>
            <option value=""></option>
            <option value="Chicken">Chicken</option>
            <option value="Beef">Beef</option>
            <option value="Vegetarian">Vegetarian</option>
            <option value="Other">Other</option>
        </select>
    </div>
    <div style="clear: both; height: 5px;">&nbsp;</div>
</section>

我希望只有在选择Meal[]后才能启用下拉列表chk_food[]。但是，我在弄清楚如何告诉jQuery只启用同一部分中的下拉框时遇到了一些麻烦。我目前将此作为jQuery :(我添加了警告框以查看代码的哪一部分无效）

var update_meal = function () {
      alert ("Hi");
      var sec_id = $(this).closest("section").attr("id");
      alert (text(sec_id));
      if ($(sec_id + "> #chk_food[]").is(":checked")) {
          $(sec_id + "> #Meal[]").prop('disabled', false);
      } else {
          $(sec_id + "> #Meal[]").prop('disabled', 'disabled');
      }

  };
  $(update_meal);
  $("#chk_food[]").change(update_meal);

当我尝试在JSFiddle上运行时，没有出现错误，但编码根本不起作用。我看到警告框弹出＆＃34;嗨＆＃34;一旦文档加载

感谢您的帮助

Answer 1

您不能在同一页面上使用相同ID的多个元素。它是无效的HTML，它会极大地混淆你的代码。要使其工作，首先需要使用类来查找内容：

<section>
   <div class="gcolumn1">JohnSmith</div>
   <div class="gcolumn2">Color:
      <input type="radio" name="chk_clr[]" value="Y">Yellow
      <input type="radio" name="chk_clr[]" value="R">Rose
      <br>Food:
      <input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
      <input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
   </div>
   <div class="gcolumn3">
      <select name="Meal[]" class="meal" disabled>
         <option value=""></option>
         <option value="Chicken">Chicken</option>
         <option value="Beef">Beef</option>
         <option value="Vegetarian">Vegetarian</option>
         <option value="Other">Other</option>
      </select>
   </div>
   <div style="clear: both; height: 5px;">&nbsp;</div>
</section>

然后你就可以开始正确地定位。像这样：

$(".chk_food").on("change", function() {
   $(this)
      .closest("SECTION")
      .find("SELECT.meal")
      .prop("disabled", $(this).is(".no"));
});

在这种情况下，我们将Yes和No食物无线电上的变更处理程序绑定在一起。将为用户点击的处理程序调用处理程序，因此它们固有地转换为＃34; on＆＃34;。因此，我们找到父部分，然后在其中选择meal，如果这是true无线电，则将其已禁用的属性设置为.yes，如果是false，则设置为.no {{1}}电台。

我认为应该这样做。

选择一个父母中的特定元素

1 个答案: