ng-readonly not working in angular checkbox

Question

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

Aparently ng-readonly is not working for checkboxes, you can use [ng-disabled](https://docs.angularjs.org/api/ng/directive/ngDisabled) — AntiHeadshot, Nov 18 '15 at 10:46
Possible duplicate of [Can HTML checkboxes be set to readonly?](http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly) — kix, Jul 08 '16 at 20:22

macrog · Accepted Answer · 2017-03-02T11:00:18.590

34

if you want to disable it use this:

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

edited Mar 02 '17 at 11:00

answered Nov 18 '15 at 10:39

macrog

2,085
1
22
30

score 10 · Answer 2 · edited Jul 08 '16 at 22:24

10

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;" />

edited Jul 08 '16 at 22:24

Stedy

7,359
14
57
77

answered Jul 08 '16 at 19:58

Michael Overbay

139
1
2

Much better and cleaner solution. – Aakash May 31 '17 at 07:58
1

In no case do not! Violate the work of the framework – Nikolay May 17 '18 at 06:35

score 7 · Answer 3 · answered Nov 18 '15 at 10:46

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.

Current documentation 1.5.8 (which your link is pointing to) does not mention such constraint, but it's actually effective. (doc improvement needed?) — VasekCh, Jun 22 '16 at 13:28

score 1 · Answer 4 · answered Feb 21 '22 at 18:19

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();    
  }

Sveen · Answer 5 · 2019-03-06T20:26:09.233

0

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

edited Mar 06 '19 at 20:26

answered Mar 01 '19 at 14:36

Sveen

347
2
10

score 0 · Answer 6 · edited Sep 26 '22 at 11:08

0

Also try [attr.disabled];

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

edited Sep 26 '22 at 11:08

ZINE Mahmoud

1,272
1
17
32

answered Dec 28 '21 at 15:36

Ewerthon

11

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 28 '21 at 16:09

ng-readonly not working in angular checkbox

6 Answers6