zoukankan      html  css  js  c++  java
  • 点击按钮切换按钮样式且两个按钮不能同时点击实现

    在我接触的项目中,有需求是当选择同意时就给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>
    

      

  • 相关阅读:
    LTE信令流程之Service Request流程介绍
    LTE信令流程之TAU流程介绍
    LTE信令流程之开机附着、去附着流程分析
    Python 数据分析之可视化工具
    LTE信令流程之切换流程介绍
    js获取昨天日期
    在dll中使用 DirectSound,编译能通过,但会出现内存问题,而且不能发声
    在dll中用DirectSound8同时播放多个wav文件不能发声
    第二次作业
    第三次作业
  • 原文地址:https://www.cnblogs.com/feipengting/p/9100152.html
Copyright © 2011-2022 走看看