前端优化 —— CheckBox 复选框点击过快导致选中旁边文字问题

- 日理万妓 2021-09-12 04:52 327阅读 0赞

> 原谅我文字表达水平有限，我想表达的是…看图

就是这个 **↓↓↓**

![我说的就是这个][SouthEast]

感觉挺恶心的…于是解决方法就来了，操刀 CSS

.disabled-click-text { 
        -moz-user-select: none; /* FireFox */
        -webkit-user-select: none; /* Webkit */
        -ms-user-select: none; /* IE10+ */
        -khtml-user-select: none; /* 奇葩浏览器 */
        user-select: none; /* 文本不允许被选择 */
    }

然后在前端 HTML 中，例如我图中的位置

<div class="form-group">
        
        <div class="col-xs-7 col-sm-8 disabled-click-text">
            <label class="css-input switch switch-sm switch-success">
                <input type="checkbox" id="register-terms" name="register-terms"> <span></span>我同意服务条款</label>
        </div>
        <div class="col-xs-5 col-sm-4">
            <div class="font-s13 text-right push-5-t"> <a href="#" data-toggle="modal" data-target="#modal-terms">查看条款</a>
            </div>
        </div>
    </div>

然后就完美了，强迫症解除：

![怎么点都不漏...][...]

[SouthEast]: /images/20210908/772e2b48050e4ec5b380153676db06ee.png
[...]: /images/20210908/cc6b051646f14a26a8c6d4786ba2d08f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关复选框选中事件

一.方法 1.jquery判断checked的三种方法: .attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-

短命女/ 2024年03月27日 09:37/ 0 赞/ 78 阅读

相关 CheckBox复选框

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

男娘i/ 2022年09月26日 03:15/ 0 赞/ 314 阅读

相关用js判断复选框（checkbox）是否选中的问题

/ 应用场景：页面提供checkbox供选择，可以多选但是不能为空，为空时候要进行相关的提示操作。但是怎么判断为空呢？就需要用到下面说的这种情况。

客官°小女子只卖身不卖艺/ 2022年08月21日 07:54/ 0 赞/ 238 阅读

相关 ExtJS4 grid复选框只有点击复选框才能选中

![Center][] selModel : Ext.create('Ext.selection.CheckboxModel', \{ mode : "SIMP

川长思鸟来/ 2022年07月17日 02:12/ 0 赞/ 289 阅读

相关点击radio后面的文字勾选框选中

在开发过程中会发现，必须点击圆圈圈的时候才能触发选中，这种体验不是很好，下面是两种点击后面的文字时触发的勾选。第一种： <form action="">

亦凉/ 2022年05月16日 14:08/ 0 赞/ 301 阅读

相关 BootStrap-table 复选框默认选中（checkbox）

bootstrap table colums 写法 var columns = \[\{ field : ‘checked’,

￡神魔★判官ぃ/ 2022年05月14日 10:35/ 0 赞/ 290 阅读

相关【前端HTML js jquery】点击checkbox后面的文字选中checkBox复选框

1、将input和label放在同一个标签p中 2、将lable的for属性值等于input的id属性值即可以实现点击label同时控制input的checkbox

小咪咪/ 2022年04月03日 07:19/ 0 赞/ 402 阅读

相关复选框初始选中

$.ajax({ url: app + '/rolePermission/select' + data.id, type: 'GET',

比眉伴天荒/ 2022年02月27日 12:06/ 0 赞/ 384 阅读

相关 element表格点击行即选中该行复选框

关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row toolti

矫情吗；*/ 2022年02月17日 00:42/ 0 赞/ 487 阅读

相关前端优化 —— CheckBox 复选框点击过快导致选中旁边文字问题

> 原谅我文字表达水平有限，我想表达的是…看图就是这个 ↓↓↓ ![我说的就是这个][SouthEast] 感觉挺恶心的…于是解决方法就来了，操刀 CSS .

- 日理万妓/ 2021年09月12日 04:52/ 0 赞/ 328 阅读