JavaScript ボタンのクリックを無効にする

Anika Tabassum Era 2023年1月30日

JavaScript JavaScript Button

JavaScript の disabled プロパティを使用してボタンクリックを無効にする
jQuery disabled 属性を使用してボタンクリックを無効にする

JavaScript では、disabled プロパティは、type="submit"としてルート化されたボタンに対してのみ正常に機能します。そうしないと、1つの送信ボタンのように機能しません。むしろ、複数の提出を受け入れます。

同様に、jQuery 属性 disabled は、submit タイプのボタンに対して機能します。また、フォームの送信方法はこの点で非常に重要です。

サンプルセットでは、JavaScript の disabled プロパティと jQuery の disabled 属性の実装を確認します。

JavaScript の `disabled` プロパティを使用してボタンクリックを無効にする

通常、提出の目的を確実にするために、フォームとその方法を定義します。とにかく、JavaScript のプロパティ disabled を使用すると、ボタンを非アクティブにすることができます。

ここでは、submit という型を持つ input フィールドを作成します。後で input タグのインスタンスを取得し、disabled プロパティを実行します。

コードスニペット：

<body>
    <p>Click the button to submit data!</p>
    <p>
        <input type='submit' value='Submit' id='btClickMe'
            onclick='save();'>
    </p>
    <p id="msg"></p>
</body>
<script>
    function save() {
      var dis = document.getElementById('btClickMe').disabled = true;
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Data submitted and the button disabled ☺';
    }
</script>
</html>

出力：

jQuery `disabled` 属性を使用してボタンクリックを無効にする

jQuery では、disabled 属性の同様の使用例があります。ここでの違いは、form タグ内の input フィールド（submit タイプボタン）を開始することです。

それがフォーム内でも機能するかどうかを確認します。

コードスニペット：

<body>
<form id="fABC" action="#" method="POST">
    <input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
    $(document).ready(function () {
        $("#fABC").submit(function (e) {
            e.preventDefault();
            $("#btnSubmit").attr("disabled", true);
            $("#btnTest").attr("disabled", true);
            return true;
        });
    });
</script>

</body>
</html>