div经常会被用来做按钮,有时候我们需要禁用按钮,让它不可被点击,一般我们会想到用disabled属性:

$(".btn").attr("disabled", true); //设置禁用
//经过测试根本没用!div设置了这个属性与click事件无关,照样能点击


image.gif

网上搜索一大把都是这样写的,然而根本没用!!设置为disabled了照样可以点击。那些转帖的人根本不动脑子。

至于为什么没用,具体的原因我也不清楚,猜测大概对于div而言,disabled只是让它内部的元素禁用吧,而对于本身的事件毫无影响,事实反正就是这样的,有兴趣深入了解的可以写个代码测试下。

说了这么多现在给出标准答案吧。

设置禁用:

$(".btn").css("pointer-events","none"); 


image.gif

解禁:

$(".btn").css("pointer-events","");  


image.gif

如果要优雅点可以建立个class,然后用addClass和removeClass,下面是完整测试,禁用的时候将div里面的文字标记为灰色了,这样更符合我们的使用习惯。

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_626784_0j006ef09vff.css">
    <script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
    <title>div禁用测试</title>
</head>
<style>
.cannotclick{
    pointer-events:none;
</style>
    <div id="testdiv">点我测试</div>
    <input type="button" id="jinyong" value="禁用div">
    <input type="button" id="qiyong" value="启用div">
</body>
<script>
$("#testdiv").click(function(){
    alert("点击了!");
$("#jinyong").click(function(){
    $("#testdiv").addClass("cannotclick");
    $("#testdiv").css("color", "#ccc");
    alert("该div已经被禁用,点击将不会有任何反应!");
$("#qiyong").click(function(){
    $("#testdiv").removeClass("cannotclick");
    $("#testdiv").css("color", "#000");
    alert("该div已经恢复正常,点击测试看看,它的事件将会正常触发");
</script>
</html>

不过这个解决方案看起来怪怪的,应该还有其他方法,如果各位知道的话请留言告知。

【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
1、问题举例描述: radio-group 标签组设置默认选择checked: ‘true’,选择了单选按钮的非默认选项(场外),再点击其他的选择(手续费率),单选按钮又会变成默认的选项(场内) 默认状态如下:
原文:Button 使用Command 按钮置灰未更新 当Button绑定了Command,按钮在窗口弹出、或者其它事件时,会自动置灰. 有时,异步执行时间较长时,界面一些绑定了命令的Button,State不会变化,会一直置灰。