Disable Checkbox Item in ListBox

Background:

Sometimes users want to disable a checkbox item in their input control list instead of having it removed from the list. You can find a solution for this problem using Wijmo's in-depth and highly customizable ListBox control.

Steps to Complete:

1. Use formatItem to handle disabling the checkbox

2. Find the checkbox item

3. Add desired CSS class styling

Getting Started

Use formatItem to handle disabling the checkbox

Use the Listbox formatItem method and addHandler to handle disabling the checkbox. In this example, were checking if the column data contains the isDisabled property to determine if the check box will be disabled:

columnPicker.current.formatItem.addHandler((s, e) => {

      if (e.data.isDisabled) {
        // Disable the entire item (e.item is the HTML element)
        ...

        // Find the checkbox within the item and disable it       
       ...
      } else {
        // Enable the item if isDisabled is false
       ...

        // Find the checkbox within the item and enable it
        ...
      }
    });

Find the checkbox item

Using querySelector we search for the checkbox input and either add or remove the disabled property:

columnPicker.current.formatItem.addHandler((s, e) => {

      if (e.data.isDisabled) {
        // Disable the entire item (e.item is the HTML element)
        ...

        // Find the checkbox within the item and disable it       
        var checkbox = e.item.querySelector('input[type="checkbox"]');
        if (checkbox) {
          checkbox.disabled = true;
        }
      } else {
        // Enable the item if isDisabled is false
       ...

        // Find the checkbox within the item and enable it
        var checkbox = e.item.querySelector('input[type="checkbox"]');
        if (checkbox) {
          checkbox.disabled = false;
        }
      }
    });

Add desired CSS class styling

After determining if we want a checkbox disabled or not, we add the desired attribute and classes to disable the checkbox:

columnPicker.current.formatItem.addHandler((s, e) => {

      if (e.data.isDisabled) {
        // Disable the entire item (e.item is the HTML element)
        e.item.setAttribute('aria-disabled', 'true');
        e.item.classList.add('disabled'); 

        // Find the checkbox within the item and disable it       
        var checkbox = e.item.querySelector('input[type="checkbox"]');
        if (checkbox) {
          checkbox.disabled = true;
        }
      } else {
        // Enable the item if isDisabled is false
        e.item.removeAttribute('aria-disabled');
        e.item.classList.remove('disabled');

        // Find the checkbox within the item and enable it
        var checkbox = e.item.querySelector('input[type="checkbox"]');
        if (checkbox) {
          checkbox.disabled = false;
        }
      }
    });

And that's it! That is how you can disable your ListBox checkbox items without removing them from the list.

A sample application that contains this solution can be found here.

Happy Coding!