How to disable all div content

Disabling nearly everything: The HTML-only method

Keep it simple with the disabled attribute of the <fieldset> element. A quick way to disable form elements:

<fieldset disabled>
  <div>
    <!-- Form elements are disabled, 'cause they're break-dancing. Get it? Break _disabled_? Okay, I'll stop... -->
  </div>
</fieldset>


Make it specific: Disabling inputs via jQuery

How about be more granular and disable only input elements in a <div>? jQuery has your back with the .prop() function:

$('div').find('input').prop('disabled', true);


Power fluctuation: Toggling between states

Give your users the power to toggle the disabled state. This handy JavaScript function adds and removes the disabling class:

function toggleDisabledStatus(divId) {
  $(`#${divId}`).toggleClass('disabled-div'); // 'I have the power!' - He-Man
}


Nested content: Reaching the unreachable

Dealing with nested elements can be as fun as finding a needle in a haystack. Strategy: Slap a disabledbutton class on every nested element:

$('#myDiv').find('*').addClass('disabledbutton');  // 'Tag! You're all "it"!'


Finicky disabling: Making it conditional

There may be times when you want to disable content based on certain conditions. Use an event listener and make it happen:

$('#myCheckbox').change(function() {
  if(this.checked) {
    $('#myDiv').addClass('disabledbutton'); // 'You're off!'
  } else {
    $('#myDiv').removeClass('disabledbutton'); // 'You're on!'
  }
});


Age of accessibility

While disabling content is a neat UI/UX gimmick, it's pivotal to consider accessibility. This is when aria-disabled comes to the rescue!

<div aria-disabled="true" class="disabled-div">
  <!-- 'I'm off duty', announces the screen reader -->
</div>


Proactive damage control

All browsers aren't created equal. Not all support pointer-events. Stay prepared with a JavaScript fallback:

if (!supportPointerEvents) {
  $('div').on('click', function(e) {
    e.preventDefault();
    // 'Here's your fallback, folks. No one left behind!'
  });
}


One method to rule them all

All the methods we discussed—HTML disabled attribute, CSS pointer-events, JavaScript/jQuery .prop()—bring different advantages to the table. Wrap them into a single, comprehensive process, catering to a wide range of use-cases and ensuring cross-platform compatibility.