CODEWITHSUNDEEP
javascriptjquerycss
Craig Johnstone
Craig Johnstone

Reputation: 131

jquery only allow one div element to be selected at a time on click

I have styled some markup where the user can select a DIV and it shows highlighted.. this works fine, however, I want to only allow one DIV to be highlighted and selected at time.. currently the user can select all 3 DIVS and they will all show highlighted. I use jquery toggleClass to add/remove "active" class to DIV. "active" class is styled in css to show blue background.

how can I stop users from selecting all 3?

$('.pricecard.aircraft').click(function() {
  // this will fire when you click view
  $(this).toggleClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 597

Answers (3)

epascarello
epascarello

Reputation: 207537

Just using HTML and CSS, no JavaScript is needed.

[name="price"]:checked + label > div {
  background-color: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<input type="radio" name="price" id="price1" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</label>
<input type="radio" name="price" id="price2" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price2">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</label>
<input type="radio" name="price" id="price3" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price3">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</label>

Upvotes: 2

user14983900
user14983900

Reputation:

You can use:

$('.pricecard.aircraft').click(function() {
  $('.pricecard.aircraft').removeClass('active');
  $(this).addClass('active');
})
.pricecard.aircraft.active {
  background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</div>

This works!

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337646

To achieve your goal call removeClass() on all the other .pricecard.aircraft elements which are not the one which was clicked on:

let $divs = $('.pricecard.aircraft').click(function() {
  $divs.not(this).removeClass('active');
  $(this).toggleClass('active');
});
.active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions