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的父<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]

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

在我的无线电更改事件中添加完整的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;
        }
    }
});

当我更改Cage Size按钮组中的任何收音机时，它将不会对ID为18的收音机进行操作。我将根据选择的某个收音机禁用某些收音机。一切都有效，除了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>

jquery .parent（）选择了错误的元素

1 个答案: