JSFiddle - React, Tailwind, and code Playground

by Udhay

HTML

<button id="trigger">Click me</button>
    <div id="overlay">
      <div id="popup">
        <div id="close">X</div>
        <h2>This is a popup</h2>
        <p>
          <div>
  <input type="checkbox" name="agreeBtn" value="1" /> Item un
</div>
<button id="activeBtn" disabled>Add</button>
        </p>
      </div>
    </div>

CSS

button#trigger {
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 3px;	
}

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  display: none;
}

#popup {
  max-width: 600px;
  width: 80%;
  max-height: 300px;
  height: 80%;
  padding: 20px;
  position: relative;
  background: #fff;
  margin: 20px auto;
}

#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #000;
}

JavaScript

$(document).ready(function() {
  $('#trigger').click(function() {
    $('#overlay').fadeIn(300);  
  });
  $('#close').click(function() {
    $('#overlay').fadeOut(300);
  });
  function countChecked() {
  if ($('input[name="agreeBtn"]:checked').length > 0 && $("#activeBtn").is(':disabled')) {
        $("#activeBtn").removeAttr('disabled')
    } else if ($('input[name="agreeBtn"]:checked').length == 0) {
       $("#activeBtn").attr('disabled', true)
    }
};
$('input[name="agreeBtn"]').on("change", function(event) {
    countChecked(); // Call countChecked event on change in checkbox
})
});