Angularjs checkbox checked by default on load and disables Select list when checked

Question

noob on stack overflow here. I am working on a webpage that has a transfer job function. This lets the user check a check-box to send the job back to the office, or select a technician from a list of all that are available. My question is how to setup the check-box so that it is checked by default when the page loads and have the select list disabled accordingly. Here is the code that I have for it at the moment:

<div ng-app="">
  Send to Office: <input type="checkbox" ng-model="checked" ng-checked="true"><br/>
  <select id="transferTo" ng-disabled="checked">
    <option>Tech1</option>
    <option>Tech2</option>
  </select>
</div>

and here is a jsfiddle for it: http://jsfiddle.net/hugmungus/LvHJw/5/

Currently, the page loads with the check-box checked, but the list is not disabled. If you un-check then re-check the it, the list becomes disabled.

Thanks for the help!

Karen Zilles · Accepted Answer · 2019-02-18 17:25:23Z

94

If you use ng-model, you don't want to also use ng-checked. Instead just initialize the model variable to true. Normally you would do this in a controller that is managing your page (add one). In your fiddle I just did the initialization in an ng-init attribute for demonstration purposes.

http://jsfiddle.net/UTULc/

<div ng-app="">
  Send to Office: <input type="checkbox" ng-model="checked" ng-init="checked=true"><br/>
  <select id="transferTo" ng-disabled="checked">
    <option>Tech1</option>
    <option>Tech2</option>
  </select>
</div>

edited Feb 18, 2019 at 17:25

answered Jun 28, 2013 at 21:55

Karen Zilles

7,6713 gold badges37 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hugmungus Over a year ago

Thanks so much, worked exactly as I had hoped. Thanks especially for the quick reply and explaining how to correct the issue.

Anita Mehta Over a year ago

It is not working foe me, I tried also same way: div class = "columns float-left" ng-click="inventory.openColumnSelector();"> <img src="static/img/icons/[email protected]"> </div> <div class="columns-selection-box arrow-up" id="checkboxes" ng-show="inventory.showColumnSelector"> <input type="checkbox" class = "checkbox" ng-model="inventory.status" ng-init="checked=true" />Status <br/></div>, on click I am showing the div and status field has to be checked...

Karen Zilles Over a year ago

@AnitaMehta Get rid of the ng-init in your template. In your controller, set scope.inventory.status = true.

vim Over a year ago

@KarlZilles setting to true instead of 1 worked for me - thanks!

Kishor Pawar Over a year ago

You beauty @KarenZilles!!! I couldn't even think ng-init can be used at element level.

|

Tom Stickel · Accepted Answer · 2017-05-08 19:13:04Z

3

Do it in the controller ( controller as syntax below)

controller:

vm.question= {};
vm.question.active = true;

form

<input ng-model="vm.question.active" type="checkbox" id="active" name="active">

answered May 8, 2017 at 19:13

Tom Stickel

20.6k7 gold badges117 silver badges117 bronze badges

Comments

Alexei - check Codidact · Accepted Answer · 2017-04-10 19:45:31Z

You don't really need the directive, can achieve it by using the ng-init and ng-checked. below demo link shows how to set the initial value for checkbox in angularjs.

demo link:

<form>
    <div>
      Released<input type="checkbox" ng-model="Released" ng-bind-html="ACR.Released" ng-true-value="true" ng-false-value="false" ng-init='Released=true' ng-checked='true' /> 
      Inactivated<input type="checkbox" ng-model="Inactivated" ng-bind-html="Inactivated" ng-true-value="true" ng-false-value="false" ng-init='Inactivated=false' ng-checked='false' /> 
      Title Changed<input type="checkbox" ng-model="Title" ng-bind-html="Title" ng-true-value="true" ng-false-value="false" ng-init='Title=false' ng-checked='false' />
    </div>
    <br/>
    <div>Released value is  <b>{{Released}}</b></div>
    <br/>
    <div>Inactivated  value is  <b>{{Inactivated}}</b></div>
    <br/>
    <div>Title  value is  <b>{{Title}}</b></div>
    <br/>
  </form>

// Code goes here

  var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {

         });

Collectives™ on Stack Overflow

Angularjs checkbox checked by default on load and disables Select list when checked

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related