CODEWITHSUNDEEP
javascriptjquery
Charlie805
Charlie805

Reputation: 169

Cannot target a class with jQuery

Hi I'm trying to access the class named "onlyTwo" class with jQuery. The reason why I want to access that class is so that the user can only choose two out of the three checkboxes. My function only works when I delete the "p" and "label" tags which are outside the input tag, so i'm sure the problem lies in this line:

$('input.onlyTwo')

Thanks! 

  

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    if ($(this).siblings(':checked').length >= limit) {
        this.checked = false;
        alert('You can only select ' + limit + ' items!');
    }
});

 
 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

Upvotes: 0

Views: 130

Answers (5)

cdoshi
cdoshi

Reputation: 2832

The issue is the use of siblings function. Siblings searches through the dom elements in the same level as the parent element. So in your case, onlyTwo checkbox is within p and label so there are no other siblings of that checkbox. You need to access checkbox using the reference of parent. Check the working snippet. Also, your condition should be > and not >=

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    if ($('.entreesGroup .onlyTwo:checked').length > limit) {
        this.checked = false;
        alert('You can only select ' + limit + ' items!');
    }
});
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

Upvotes: 1

4b0
4b0

Reputation: 22323

Use closest p with siblings and find checked check box.

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {

  if ($(this).closest('p').siblings().find(':checked').length == limit) {
    this.checked = false;
    alert('You can only select ' + limit + ' items!');
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Order Form</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form id="reviewOrder">
    <fieldset>
      <legend>Suite Packages</legend>
      <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
      <div class="expander">
        <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
        <div class="expander-content">
          <div class="item">
            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your
              choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
            <div class="entreesGroup">
              <div>
                <p>Salads (Choose Two)</p>
                <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </form>
</body>

</html>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this: you can get length of all checked checkboxes and then compare it in if condition. See below code

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    var len = $('input.onlyTwo:checked').length;
    if (len > limit) {
        $(this).prop('checked', false);
        alert('You can only select ' + limit + ' items!');
    }
});
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

.siblings() will only work when they are under same parent, in your case you have checkboxes wrapped under <p>,

You can target the closest parent element i.e entreesGroup div and find checkboxes which are checked under the parent element

Also remove = while checking the condition

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    if ($(this).closest(".entreesGroup").find(':checked').length > limit) {
        this.checked = false;
        alert('You can only select ' + limit + ' items!');
    }
});

 
 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

Upvotes: 2

Satpal
Satpal

Reputation: 133423

The Check-boxes are not .siblings(), thus your code didn't worked.

Traverse up to a common ancestor using .closest(selector), then target desired elements i.e. check-boxes.

Additionally also change the condition to >

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
  if ($(this).closest('.entreesGroup').find(':checked').length > limit) {
    this.checked = false;
    alert('You can only select ' + limit + ' items!');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="entreesGroup">
  <div>
    <p>Salads (Choose Two)</p>
    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
  </div>
</div>

Upvotes: 2

Related Questions