How can I enable/disable an element's click handler with CSS?

Question

I am using it in JavaScript to enable and disable a div element:

$("#divbutton").css("pointer-events","auto");

But I want a property that enables and disables the element. How can I do that?

html

<div class="buttonSender" id="divbutton">Invia</div>

Answer 1

While I strongly recommend using a <button> instead of a <div>, I can think of one case where you might not be able to change the HTML markup to do that.
I start below with the case you should strive for, using a <button> for a button, but follow further below with how you can "disable" a div that is acting as a button.

---

You can make a div act like a button by adding a click handler to it, then disable it simply by adding a class with the proper CSS, mainly by disabling pointer-events.

Here, the <div> is acting as a button by using a class, and it gets disabled by adding another class, "disabled". The click handler on the div demonstrates it is clickable by using an alert, and you will see that it no longer reacts to clicks when the "disabled" class gets added to the div.

$('#divbutton').click(function(e) {
  // This is where you would put your code that
  // does something when the div is clicked.
  alert('The Fake Button was Clicked');
});

// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
  $('#divbutton').addClass('disabled');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
  $('#divbutton').removeClass('disabled');
});

div.buttonSender {
  margin: 1px;
  padding: 4px;
  border: 1px solid darkgray;
  border-radius: 2px;
  max-width: 20em;
  pointer-events: auto;
  color: black;
  background-color: peachpuff;
}

div.buttonSender.disabled {
  background-color: lightgray;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div id="divbutton" class="buttonSender" role="button">
    This is the div that is acting like a button.<br> Click Me
  </div>
</section>

<section class="demo-buttons">
  <button id="demo-disable">Disable</button>
  <button id="demo-enable">Enable</button>
</section>

I've added the role="button" on the div for the purposes of accessibility, but that is not all you would have to do for proper accessibility — see the "Note:" in the ARIA: button role documentation.

You would be much better off using a <button> instead of a <div> since you are able to put any HTML in the button tag that you could put in the div.

---

The only reason (that I can think of) that you would "have to" use a div is if the HTML is written by someone else and you have no access to change it and no way to influence the author of the HTML.
In that case you also aren't able to add classes or an ID, or write any new CSS, and would have to work with what is already there.

This demo does that by modifying the CSS using jQuery's .css() method, disabling then restoring the pointer-events — note jQuery uses the camelCased property name, so it is pointerEvents not pointer-events.

/*
 * This is NOT your code - this would be the click handler that already exists.
 */
$('#divbutton').click(function(e) {
  // Assume there is already a click handler, and you want to disable it.
  // This code would be the existing handler, somewhere else, not written by you.
  alert("Invia was clicked");
});


/*
 * This would be your code, and it wouldn't be packaged with the code above
 */
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
  $('#divbutton').css('pointerEvents', 'none');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
  $('#divbutton').css('pointerEvents', 'auto');
});

#divbutton {
  border: 1px solid darkgray;
  border-radius: 2px;
  padding: 5px;
  max-width: 5em;
}

#demo-controls {
  margin-top: 2em;
  border-top: 1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <p>
    This area would be part of the page that you don't control.<br>
    The div acting like a button is below, and you can't change it.
  </p>
  <div class="buttonSender" id="divbutton">Invia</div>
</section>

<section id="demo-controls">
  <p>
    This area would not be part of the HTML, over which you have no control,
    but somehow you need a way to fire your code that disables the existing div#divbutton
    <br>
    There needs to be <em>something</em> that fires your javascript;
    these buttons simulate that.
  </p>
  <button id="demo-disable">Disable</button>
  <button id="demo-enable">Enable</button>
</section>

Answer 2

Try creating a CSS class with the value of pointer-events that you want like in the following example:

document.querySelector('button').addEventListener('click', () => {
  document.getElementById('divbutton').classList.toggle('disabled');
});

#divbutton.disabled {
  pointer-events: none;
  user-select: none;
  background:yellow;
}
#divbutton {
  height: 2rem;
}

<div class="buttonSender" id="divbutton">Invia</div>
<button>click me</button>