javascript - jquery .parent() 选择错误的元素

Question

我有以下 html:

<div id="fanModals"></div>
  <div class="container">

    <div class="row">
      <div class="col-sm-6 control-wrap">
        <fieldset>
          <legend>&nbsp;Impeller Size </legend>
          <div id='btnImpSize' class='btn-group btn-group-justified' data-toggle='buttons'>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='18' value='18'> 18" </label>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='24' value='24'> 24" </label>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='26' value='26'> 26" </label>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='27' value='27'> 27" </label>
          </div>
        </fieldset>
        <fieldset>
          <legend>&nbsp;Cage Size</legend>
          <div id='btnCageSize' class='btn-group btn-group-justified' data-toggle='buttons'>
            <label  class='btn btn-default'><input type='radio' name='cage_size' id='20.5' value='20.5'> 20.5" </label>
            <label  class='btn btn-default'><input type='radio' name='cage_size' id='28.5' value='28.5'> 28.5" </label>
            <label  class='btn btn-default'><input type='radio' name='cage_size' id='31' value='31'> 31" </label>
          </div>
        </fieldset>
      </div>
    </div>
  </div>

我正在尝试定位父级 label第一个 radio 的元素 <input>通过使用:

$("#18").prop("checked", false).parent().removeClass("active").addClass("disabled");

当我这样做时，我希望它以父级 <label> 为目标但由于某种奇怪的原因，它的目标一直是 div ID 为fanModals 。我正在使用其他单选按钮执行此操作，效果很好。例如，当我这样做时:

$("#26").prop("checked", false).parent().removeClass("active").addClass("disabled");

它有效。唯一的区别是我选择了不同的单选按钮(这不是该组的第一个单选元素)。

我知道它选择了fanModals上课，因为我做了 console.log($("#18").parent());及其返回:

m.fn.init [div#fanModals.disabled, prevObject: m.fn.init(1), context: document]

我的所有标签都已正确关闭(使用验证器进行双重检查)。我错过了什么？

在我的 radio 更改事件中添加完整的 switch 语句:

$('input:radio').change(function() {
    var senderName = this.name;
    var senderValue = this.value;
    var senderID = this.id;

    if (senderName == "imp_size"){
        switch(senderValue) {
            case "18":
                $("#20\\.5").parent().removeClass("disabled");
                $("#28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#31").prop("checked", false).parent().removeClass("active").addClass("disabled");
                //console.log('check');
            break;
            case "24":
                $("#20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#28\\.5").parent().removeClass("disabled");
                $("#31").prop("checked", false).parent().removeClass("active").addClass("disabled");
            break;
            case "26":
                $("#20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#31").parent().removeClass("disabled");
            break;
            case "27":
                $("#20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#31").parent().removeClass("disabled");
            break;
        }
    } else if (senderName == "cage_size") {
        switch(senderValue) {
            case "20.5":
                //console.log($("#18").parent());
                $("#18").parent().removeClass("disabled");
                $("#24").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#26").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#27").prop("checked", false).parent().removeClass("active").addClass("disabled");
            break;
            case "28.5":
                $("#18").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#24").parent().removeClass("disabled");
                $("#26").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#27").prop("checked", false).parent().removeClass("active").addClass("disabled");
            break;
            case "31":
                $("#18").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#24").prop("checked", false).parent().removeClass("active").addClass("disabled");
                $("#26").parent().removeClass("disabled");
                $("#27").parent().removeClass("disabled");
            break;
        }
    }
});

当我更改“笼子大小”按钮组中的任何 radio 时，它不会对 ID 为 18 的 radio 起作用。我将根据所选 radio 禁用某些 radio 。除了 18 之外，一切正常。

Answer 1

您可以使用不同的方式来查找特定的输入id，如下所示？

$("#btnImpSize > label > #18").prop("checked", false).attr("disabled", true);

$("#btnImpSize > label > #26").prop("checked", false).attr("disabled", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fanModals"></div>
  <div class="container">

    <div class="row">
      <div class="col-sm-6 control-wrap">
        <fieldset>
          <legend>&nbsp;Impeller Size </legend>
          <div id='btnImpSize' class='btn-group btn-group-justified' data-toggle='buttons'>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='18' value='18'> 18" </label>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='24' value='24'> 24" </label>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='26' value='26'> 26" </label>
            <label class='btn btn-default'><input type='radio' name='imp_size' id='27' value='27'> 27" </label>
          </div>
        </fieldset>
      </div>
    </div>
  </div>