Disable Checkbox Item in ListBox in JavaScript

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. Create the ListBox instance and attach the handler directly. In this example, were checking if the column data contains the isDisabled property to determine if the check box will be disabled:

// app.js
var columnPicker = new wijmo.input.ListBox('#columnPicker', {
  // configure your ListBox here (itemsSource, displayMemberPath, checkedMemberPath, etc.)
});

columnPicker.formatItem.addHandler(function (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
    ...
  }
});

<!-- index.html -->
<div id="columnPicker"></div>

Find the checkbox item

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

columnPicker.formatItem.addHandler(function (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.formatItem.addHandler(function (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;
    }
  }
});

(Optional) Example CSS to visually indicate disabled items:

/* styles.css */
.disabled {
  opacity: 0.5;
}

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

Happy coding!