如何在开关关闭且开关开启时禁用标签?
How to disable the label when switch is off and switch is on enable in angular?
嗨,当开关关闭时,标签应该是灰色的,就像标签应该禁用一样,如果打开,那么标签应该启用使用角度
这里小提琴:http://jsfiddle.net/dgj7s5sk/8/
<label>check1</label>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
checked="checked" />
<label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<label>check2</label>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" />
<label class="onoffswitch-label" for="myonoffswitch2"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
请在这个问题上。谢谢
这是更新后的 fiddle with solution.
在您的示例中,您没有将代码声明为 angular 应用程序。
我做了什么:
- 使用了 Angular 框架(请参阅左侧 'Frameworks & Extensions' 下的第一个下拉列表)
- 声明为 angular 应用程序。请参阅第一行的
<div ng-app>
。
- 为输入
switches.switch1
和 switches.switch2
定义了 ng-model
。
- 为禁用的标签
定义了一个新的class
.disabled-class {
color:gray;
}
- 应用条件 class 使用 ng-class
<label ng-class="(switches.switch1)?'':'disabled-class'">check1</label>
<label ng-class="(switches.switch2)?'':'disabled-class'">check2</label>
嗨,当开关关闭时,标签应该是灰色的,就像标签应该禁用一样,如果打开,那么标签应该启用使用角度
这里小提琴:http://jsfiddle.net/dgj7s5sk/8/
<label>check1</label>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
checked="checked" />
<label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<label>check2</label>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" />
<label class="onoffswitch-label" for="myonoffswitch2"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
请在这个问题上。谢谢
这是更新后的 fiddle with solution.
在您的示例中,您没有将代码声明为 angular 应用程序。
我做了什么:
- 使用了 Angular 框架(请参阅左侧 'Frameworks & Extensions' 下的第一个下拉列表)
- 声明为 angular 应用程序。请参阅第一行的
<div ng-app>
。 - 为输入
switches.switch1
和switches.switch2
定义了ng-model
。 - 为禁用的标签 定义了一个新的class
.disabled-class {
color:gray;
}
- 应用条件 class 使用 ng-class
<label ng-class="(switches.switch1)?'':'disabled-class'">check1</label>
<label ng-class="(switches.switch2)?'':'disabled-class'">check2</label>