Disable Checkboxes in Sencha Touch

Question

I am trying to use the Check Box makes the component greyout/ disable.

field.setDisabled(true);

This works fine in browser, but in iPhone and iPad devices browser it is disabling and gray out the label but still user us be able to select any of the checkboxes.

Does anybody know how to implement this?

Thanks in advance.

Answer 1

This is probably due to opened BUG #135 (Disabled Checkboxes/Radiobuttons still working) .

Comments to bug provide couple of workarounds one of which is (you can put this in one of your JavaScript files elsewhere after Sencha Touch is loaded, you should require Ext.form.Checkbox first if it not yet exists too):

Ext.override(Ext.form.Checkbox, {
  onChange: function(e) {
    if (e) {
      if (e.browserEvent) {
        e = e.browserEvent;
      }

      if (Ext.supports.Touch && !e.isSimulated) {
        e.preventDefault();
        e.stopPropagation();
        return;
      }
    }

    if(!this.isDisabled()){
      if (this.isChecked()) {
        this.lastState = true;
        this.fireEvent('check', this);
      } else {
        this.lastState = false;
        this.fireEvent('uncheck', this);
      }
    } else {
      var state;
      if(!Ext.isEmpty(this.lastState)){
        state = this.lastState;
      } else {
        state = Ext.isEmpty(this.originalState) ?
                  this.getBooleanIsChecked(this.checked) : this.originalState;
      }
      this.setChecked(state);
    }
  }
});