ion-checkbox: Add disabled style

[ammulder]

Similar to #541 it would be great to have an obvious "disabled" appearance for check boxes.

To see this in action, in test/html/toggle.html just add ng-disabled="isDisabled" to the two ion-checkbox elements and then use the "Disable MyModel" toggle. You can make the checkboxes disabled, but there's no visual distinction between an enabled one and a disabled one.

Further, it would be great if the corresponding text was dimmed, but I guess that's a separate issue. :)

[ammulder]

FWIW, I turned disabled checkboxes grey this with the following change:

CSS:

input:disabled + .checkbox-icon:before {
    border-color: silver !important;
}
input:disabled:checked + .checkbox-icon:before {
    background-color: silver !important;
}

I went a little further and dimmed the text by changing checkbox.js to add an ng-class to the text div with a disabled style if ngDisabled was provided. Something like:

if(isDefined(attr.ngDisabled)) {
    element.find('div').eq(1).attr("ngClass",
                                   "{'text-disabled':"+attr.ngDisabled+"}");
}

And then more CSS:

.text-disabled {color: silver !important;}

[perrygovier]

Thanks @ammulder, I'd like to implement this this as part of addressing ticket #1509

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.