Question

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

<!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>

Answer 1

您的代码非常完美，只需添加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>

Answer 2

在头标记的顶部包含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>

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

2 个答案: