点击按钮切换按钮样式且两个按钮不能同时点击实现

最新推荐文章于 2022-11-16 11:21:42 发布

weixin_33753003

最新推荐文章于 2022-11-16 11:21:42 发布

阅读量364

点赞数

文章标签： python ui 前端 ViewUI

原文链接：http://www.cnblogs.com/feipengting/p/9100152.html

版权

在我接触的项目中，有需求是当选择同意时就给text中赋值2，当点击不同意时就给text中赋值3，但是又不能点击了同意按钮后不同意按钮还可以点击，那用click事件就行不通，后来我用了jquery中的切换事件toggle()解决了，所有分享一下，也希望可以帮忙优化一下。

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function () {
        $("#agree").toggle(function () {
            $("#agree").css("backgroundColor", "#23b0f1");
            $("#agree").css("font-weight", "bold");
            $("#agree").css("color","#1C1C1C");
            $("#disposeValue").val("2");
            $("#disposeValue").show();
            $("#disagree").unbind();
        }, function () {
            $("#agree").css("backgroundColor", "");
            $("#agree").css("font-weight", "");
            $("#agree").css("color","#8B8989");
            $("#disposeValue").val("");
            disagree();
        });

        $("#disagree").toggle(function () {
            $("#disagree").css("backgroundColor", "#23b0f1");
            $("#disagree").css("font-weight", "bold");
            $("#disagree").css("color","#1C1C1C");
            $("#disposeValue").val("3");
            $("#agree").unbind();
        }, function () {
            $("#disagree").css("backgroundColor", "");
            $("#disagree").css("font-weight", "");
            $("#disagree").css("color","#8B8989");
            $("#disposeValue").val("");
            agree();
        });
    });
    function disagree(){
            $("#disagree").toggle(function () {
            $("#disagree").css("backgroundColor", "#23b0f1");
            $("#disagree").css("font-weight", "bold");
            $("#disagree").css("color","#1C1C1C");
            $("#disposeValue").val("3");
            $("#agree").unbind();
        }, function () {
            $("#disagree").css("backgroundColor", "");
            $("#disagree").css("font-weight", "");
            $("#disagree").css("color","#8B8989");
            $("#disposeValue").val("");
            agree();
        });}
    function agree(){
            $("#agree").toggle(function () {
            $("#agree").css("backgroundColor", "#23b0f1");
            $("#agree").css("font-weight", "bold");
            $("#agree").css("color","#1C1C1C");
            $("#disposeValue").val("2");
            $("#disagree").unbind();
        }, function () {
            $("#agree").css("backgroundColor", "");
            $("#agree").css("font-weight", "");
            $("#agree").css("color","#8B8989");
            $("#disposeValue").val("");
            disagree();
        });}
</script>
</head>
<body>
	 <input type="text" id="disposeValue" style="display: none;"/>
         <input type="button" value="同意立案" id="agree" style="color: #8B8989;" />
         <button id="disagree" style="color: #8B8989;">不予立案</button>
</body>
</html>

转载于:https://www.cnblogs.com/feipengting/p/9100152.html