Disable ListBox Checkbox Item in Angular

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 Angular, get a reference to the ListBox with @ViewChild and wire up formatItem in ngAfterViewInit. In this example, were checking if the column data contains the isDisabled property to determine if the check box will be disabled:

// app.component.ts
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { WjListBox } from 'wijmo/wijmo.angular2.input';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('columnPicker', { static: true }) columnPicker!: WjListBox;

  ngAfterViewInit(): void {
    this.columnPicker.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
        ...
      }
    });
  }
}

<!-- app.component.html -->
<wj-list-box #columnPicker></wj-list-box>

Find the checkbox item

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

this.columnPicker.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:

this.columnPicker.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.

Happy coding!