EE // 29182554

by ChrisStanyon

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
  <div class="row no-gutters">

    <div class="col-3">
      <div class="card">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>
    <div class="col-3">
      <div class="card">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>
    <div class="col-3">
      <div class="card">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>
    <div class="col-3">
      <div class="card">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
      </div>
    </div>

  </div>
  
  <div class="row">
    <div class="col">
      <button id="myButton" class="btn btn-success" disabled>
        Click Me
      </button>
    </div>
  </div>

</div>

CSS

.card {
  cursor: pointer;
  margin: 15px;
}

.card.clicked .card-text {
  background-color:green;
}

JavaScript

$('.card').click(function() {
    $('.card').removeClass('clicked')
    $(this).addClass('clicked')
    
    $('#myButton').prop('disabled', false);
})