Magento 2. Frontend. Ui Component. Disable select field after value is selected

Question

I'm using a M2 custom Ui Component that extends from Magento_Ui/js/form/element/select so I have total control over the Javascript File.

How do I disable the field after a value is selected?

Can this be achieved without using a custom JS?

Answer 1

Can this be achieved without using a custom JS?

No, you need to extend the Magento_Ui/js/form/element/select component to add new features to the select (disabling it when the value is selected is a new feature).

How do I disable the field after a value is selected?

You can do this by subscribing to the value property of your custom select, which is "inherited" from the Magento_Ui/js/form/element/select component, and disable the select in the callback.

To disable the select, you can change the value of the disabled property (which is an KnockoutJS observable) to true, or simply call the this.disable() method.

Here's a basic example:

define([
  'Magento_Ui/js/form/element/select'
], function(Select) {

  return Select.extend({
    initialize() {
      this._super();

      this.value.subscribe(() => {
        this.disable();
        // OR
        this.disabled(true);
      });
    }
  });
});