点击按钮切换按钮样式且两个按钮不能同时点击实现
在我接触的项目中,有需求是当选择同意时就给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>