Disabled Checkbox can still be checked/unchecked when on iPad

[smerny]

My sencha checkboxes are unchangeable in Chrome after disabling them, however, on the iPad they are still changeable.

Is this normal? Is there a workaround to make them actually disabled in iPad rather than just greyed out?

[mitchellsimoens]

So the check event doesn't fire but yeah the checkmark does change colors. There isn't a way I found to stop it but since the value doesn't change you can simply use a CSS to not sure the check changing:

.x-field.x-item-disabled .x-input-radio:checked:after,
.x-field.x-item-disabled .x-input-checkbox:checked:after {
    border-color: #DDD;
}

[smerny]

i have a function on 'change' listener that does get fired when the button is disabled

[smerny]

okay the check/uncheck events wont fire...however with your method, if a user checks the box while it is disabled.. it wont appear checked... but then if the checkbox is enabled again it will appear checked even though the system still thinks it is unchecked (the check event never fired because the user never checked it while it was enabled)

[smerny]

this is what i ended up doing... bit awkward but it works... also have the functionality of clicking the label to check/uncheck

                listeners:
                {
                    check:function(){
                        var obj = Ext.getCmp('[cmp id]');
                        if(!obj.isDisabled()){
                            filterObjs(obj.getId(), obj.getValue(), obj.isChecked());
                        }
                    },
                    uncheck:function(){
                        var obj = Ext.getCmp('[cmp id]');
                        if(!obj.isDisabled()){
                            filterObjs(obj.getId(), obj.getValue(), obj.isChecked());
                        }
                    },
                    click: {
                        element: 'el',
                        fn: function() {
                            var obj = Ext.getCmp('[cmp id]');
                            if(obj.isDisabled()){
                                if(obj.isChecked()){
                                    obj.uncheck();
                                } else {
                                    obj.check();
                                }
                            }
                        }
                    },
                    labelEl:{
                        tap:function(){
                            var obj = Ext.getCmp('[cmp id]');
                                if(obj.isChecked()){
                                    obj.uncheck();
                                } else {
                                    obj.check();
                                }
                        }
                    }
                }