jquery .parent() choosing wrong element

Question

I have the following 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>

I'm trying to target the parent label element of the first radio <input> by using:

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

When I do this I'm expecting it to target the parent <label> but for some strange reason it targets all the way to the div with the id of fanModals. I'm doing this with the other radio buttons and it works fine. For example when I do:

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

it works. The only difference is I'm selecting a different radio button (that's not the first radio element of the group).

I know it's selecting the fanModals class because I did a console.log($("#18").parent()); and its returning:

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

All my tags are properly closed (double checked with a validator). What am I missing?

Adding full switch statement inside my radio changed event:

$('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;
        }
    }
});

When I change any radio in the Cage Size button group it will not act on the radio with an id of 18. I'm disabling certain radios based on which one is selected. Everything works except 18.

i bet you have another piece of code conflicting with this. What other JS scripts do you have running on your page? — CodeGodie, Jun 06 '18 at 03:30
I'm running a switch statement that checks the sender and determine which radio is checked. Edited and added the switch statement. That's the only thing that's happening when a radio is changed — ItsPronounced, Jun 06 '18 at 03:34
do you perhaps have duplicate Ids in your HTML? the id being `#18` — CodeGodie, Jun 06 '18 at 03:35

gotnull · Accepted Answer · 2018-06-06T04:42:30.703

3

Can you use a different way to find the specific input id like the following?

$("#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>

edited Jun 06 '18 at 04:42

answered Jun 06 '18 at 03:30

gotnull

26,454
22
137
203

This actually worked! I changed it for all $("#18") selectors and it worked finally. I just dont' get why it works for all other selectors except 18 – ItsPronounced Jun 06 '18 at 03:44
I still don't understand why the old selector works for everything but this one element with this one id. Thank you, regardless! – ItsPronounced Jun 06 '18 at 03:47
1

Ahhh I figured out why it was happening. I have modals being generated when the page renders, and their ID's are unique ID's being returned from a database. #18 had a modal, however 20-30 did not, which is why those ID's worked. Changed my selectors to your suggestion and everything is working great. Thanks again! – ItsPronounced Jun 06 '18 at 03:56
CSS doesn't allow the selectors to begin with no. – Ashish Singh Rawat Jun 06 '18 at 04:33
Yes it's not a good practice. This might help you out. https://stackoverflow.com/q/5672903/5282407 – Ashish Singh Rawat Jun 06 '18 at 04:40

jquery .parent() choosing wrong element

1 Answers1