CODEWITHSUNDEEP
angularjscheckbox
Praveen Prasannan
Praveen Prasannan

Reputation: 7133

ng-readonly not working in angular checkbox

Can I use ng-readonly directive in a checkbox?

The checkbox is writable even after it is decorated with ng-readonly.

Html: 

<input type="checkbox" ng-model="model" ng-readonly="test" /> {{model}}

Controller:

myApp.controller('MyCtrl', function($scope) {
    $scope.test = true;
});

Added Fiddle

Upvotes: 20

Views: 32503

Answers (6)

Ewerthon
Ewerthon

Reputation: 11

Also try [attr.disabled];

<input type="checkbox" [attr.disabled]="true"> </input>

Upvotes: 0

Carlos Luis Rivero
Carlos Luis Rivero

Reputation: 177

In my case I did this, and it worked for me. I think that way I don't directly access the DOM. If someone see any error, please let me know. Thanks.

HTML

<input type="checkbox" name="name" id="name" [checked]="true" (click)="onNoClick($event)">

TypeScript

  onNoClick(event: Event): void {
    event.preventDefault();    
  }

Upvotes: 1

Sveen
Sveen

Reputation: 426

Using CSS:

md-checkbox[ng-readonly="true"]{
    z-index: -1;
}

or 

md-checkbox[ng-readonly="true"]{
     pointer-events: none
}

The last, doesn't work in IE

Upvotes: 0

macrog
macrog

Reputation: 2105

if you want to disable it use this:

<input type="checkbox" ng-disabled="true" ng-model="test" />

Upvotes: 36

Michael Overbay
Michael Overbay

Reputation: 159

If you like to have it "more" visible, you can always use a little javascript trick:

<input type="checkbox" ng-model="model" onclick="return false;" />

Upvotes: 11

Vaibhav Shah
Vaibhav Shah

Reputation: 528

ng-readonly only work with input type="text"

see documentation here -https://docs.angularjs.org/api/ng/directive/ngReadonly

The HTML specification does not require browsers to preserve the values of boolean attributes such as readonly. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngReadonly directive solves this problem for the readonly attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.

Upvotes: 7

Related Questions