时间戳

首页 > 解决方案 > 禁用使用 font-awesome 创建的复选框

javascript - 禁用使用 font-awesome 创建的复选框

问题描述

我是前端技术的新手，想实现以下目标。我试图找到一个解决方案，但直到现在都没有帮助我。我的问题是这样的——假设我有 2 个标记为 1）我不喜欢数字 2）我不喜欢字母的主复选框（两者都使用字体真棒样式的复选框）

<div class="x-form-cb-li select-option2">
<input type="checkbox" name="brands" id="no-brand" style="display: none;">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none; color:#228B22;"></i>
<label id="label-numbers" for="none" class="x-form-cb-label">I do not like numbers</label>
<label id="label-alphabets" for="none" class="x-form-cb-label">I do not like alphabets</label>

我们有五个标记为1、2、3、4和5的复选框，当带有标签ID的复选框ID =“ Label-numbers”时，该五个复选框被禁用。同样，我们有五个标记为A，B，C，D和E的复选框，当带有标签ID =“ Label-Alphabets”的复选框被禁用了这五个复选框。所有这些都应该使用字体很棒的图标。我可以用普通的复选框来实现这一点，但我被字体很棒的复选框卡住了。

编辑：有人可以帮我提供代码 https://jsfiddle.net/ankit1191/wb4snfm6/45/ 在其中选中复选框-'我不喜欢数字'时，复选框-'1'被禁用并且未选中复选框-'1' 达到正常状态。

标签： javascripthtmlcsscheckboxfont-awesome

解决方案

disabled在 div 中使用 bootstrap 类和 class x-form-cb-li select-option2 disabled。我认为您正在尝试使用引导程序禁用。检查引导程序中的禁用类。

<div class="x-form-cb-li select-option2 disabled">
<input type="checkbox" name="brands" id="no-brand" style="display: none;">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none; color:#228B22;"></i>
<label id="label-numbers" for="none" class="x-form-cb-label">I do not like numbers</label>
<label id="label-alphabets" for="none" class="x-form-cb-label">I do not like alphabets</label>

推荐阅读