Angularjs 复选框在加载时默认选中，选中时禁用选择列表 [英] Angularjs checkbox checked by default on load and disables Select list when checked

问题描述

这里是堆栈溢出的菜鸟.我正在处理一个具有转移工作功能的网页.这使用户可以选中复选框以将作业发送回办公室，或从所有可用的列表中选择技术人员.我的问题是如何设置复选框，以便在页面加载时默认选中它并相应地禁用选择列表.这是我目前拥有的代码:

发送到办公室:<input type="checkbox" ng-model="checked" ng-checked="true"><br/><select id="transferTo" ng-disabled="checked"><option>Tech1</option><option>Tech2</option></选择>

这里是一个 jsfiddle:http://jsfiddle.net/hugmungus/LvHJw/5/

当前，页面加载时选中了复选框，但列表未禁用.如果您取消选中然后重新选中它，该列表将被禁用.

感谢您的帮助！

解决方案

如果你使用 ng-model，你不想也使用 ng-checked.相反，只需将模型变量初始化为 true.通常，您会在管理页面的控制器中执行此操作(添加一个). 在您的小提琴中，我只是出于演示目的在 ng-init 属性中进行了初始化.

http://jsfiddle.net/UTULc/

发送到办公室:<input type="checkbox" ng-model="checked" ng-init="checked=true"><br/><select id="transferTo" ng-disabled="checked"><option>Tech1</option><option>Tech2</option></选择>

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!

解决方案

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>

这篇关于Angularjs 复选框在加载时默认选中，选中时禁用选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！