javascript ボタン　クリックできないようにする。

    $(".my-button").click(function() {
        setTimeout(function() {
            $(".signal-skyblue").css("background-color", "skyblue");
        }, 1000);
        setTimeout(function() {
            $(".signal-skyblue").css("background-color", "grey");
        }, 2000);
        setTimeout(function() {
            $(".signal-yellow").css("background-color",  "yellow");
        }, 2000);
        setTimeout(function() {
            $(".signal-yellow").css("background-color", "grey");
        }, 3000);
        setTimeout(function() {
            $(".signal-red").css("background-color", "red");
        }, 3000);
        setTimeout(function() {
            $(".signal-red").css("background-color", "grey");
        }, 4000);
        setTimeout(function() {
            $(".signal-skyblue").css("background-color", "skyblue");
        }, 4000);
    });
})
コード

    width: 300px;
    height: 100px;
    background: white;
}

.signal-skyblue, .signal-yellow, .signal-red {
    width: 80px;
    height: 80px;
    background: grey;
    float: left;
    border-radius: 50px;
    margin-top: 10px;
    margin-left: 14px;
}

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <link rel = "stylesheet" href = "main.css">
  </head>
  
  <body>
    <div class = "square">
      <div class = "circles">
        <div class = "signal-skyblue"></div>
        <div class = "signal-yellow"></div>
        <div class = "signal-red"></div>
      </div>
    </div>

    <button type = "button" class = "my-button">ボタン</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

信号機を作っているのですが、ボタンをおすと自動で切り替わります。そこでボタンを連打するとバグるので切り替わってる途中はボタンをクリック不可にしたいです。

退会済みユーザー

2019/01/04 01:04

CSSが一部切れてしまっています

行動規範の内容に同意します

回答1件

ベストアンサー

js
1$(".my-button").click(function() {
2	$btn = $(this);
3	$btn.prop("disabled", true);
4    setTimeout(function() {
5        $(".signal-skyblue").css("background-color", "skyblue");
6    }, 1000);
7    setTimeout(function() {
8        $(".signal-skyblue").css("background-color", "grey");
9    }, 2000);
10    setTimeout(function() {
11        $(".signal-yellow").css("background-color", "yellow");
12    }, 2000);
13    setTimeout(function() {
14        $(".signal-yellow").css("background-color", "grey");
15    }, 3000);
16    setTimeout(function() {
17        $(".signal-red").css("background-color", "red");
18    }, 3000);
19    setTimeout(function() {
20        $(".signal-red").css("background-color", "grey");
21    }, 4000);
22    setTimeout(function() {
23        $(".signal-skyblue").css("background-color", "skyblue");
24        $btn.prop("disabled", false);
25    }, 4000);
26});