单击一个按钮,然后激活另一个按钮

时间:2017-07-08 05:42:16

标签: javascript jquery

我想点击第一个按钮然后激活第二个按钮。第二个按钮激活后,第一个按钮将被禁用。我写了下面的代码,但它没有用。问题在哪里?

<!DOCTYPE html>
<html>
<head>
<title>Edit Page</title>
</head>
<body>
<input type="submit" name="submit" value="button1" id="bt1">
<input type="button" name="button" value="button2" id="bt2" disabled="disabled">
</body>
<script>
$(function(){
        $("#bt1").click(function(){
            $(this).attr("disabled", "disabled");
            $("#bt2").removeAttr("disabled");
        });

        $("#bt2").click(function(){
            $(this).attr("disabled", "disabled");
            $("#bt1").removeAttr("disabled");
        });
    });
</script>


</html>

2 个答案:

答案 0 :(得分:2)

您的代码非常完美,只需添加jQuery库即可开始工作

点击此处: -

$(function(){
  $("#bt1").click(function(){
    $(this).attr("disabled", "disabled");
    $("#bt2").removeAttr("disabled");
  });

  $("#bt2").click(function(){
    $(this).attr("disabled", "disabled");
    $("#bt1").removeAttr("disabled");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Edit Page</title>
  </head>
  <body>
    <input type="submit" name="submit" value="button1" id="bt1">
    <input type="button" name="button" value="button2" id="bt2" disabled="disabled">
  </body>
</html>

答案 1 :(得分:1)

在头标记的顶部包含jQuery库文件,如下所示:

<html>
<head>
<title>Edit Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function(){
$("#bt1").click(function(){
$(this).attr("disabled", "disabled");
$("#bt2").removeAttr("disabled");
});

$("#bt2").click(function(){
$(this).attr("disabled", "disabled");
$("#bt1").removeAttr("disabled");
});
});
</script>
</head>
<body>
<input type="submit" name="submit" value="button1" id="bt1">
<input type="button" name="button" value="button2" id="bt2" disabled="disabled">
</body>
</html>