选择父元素中的特定元素

Question

这是我的HTML表单结构:

EDIT:每个section都是由PHP脚本生成的，section 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[]被选择为yes后才启用。但是，我在弄清楚如何告诉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上运行这个时，没有错误出现，但是代码根本不起作用。当文档加载时，我看到一个带有"Hi"的警告框弹出

谢谢你的帮助

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食物无线电上。处理程序将为用户单击的那个调用，所以他们本质上是在"打开"那个。因此，我们找到父部分，然后在其中选择meal，并将其禁用属性设置为true，如果这是.yes电台，如果这是.no电台，则设置为false。

我想应该可以了。