JQuery クリックイベントの挙動について

現在仕事で開発中のプログラムで、下記のようなチェックボックスをクリックした際（チェックボックスがONの時）にテキストボックスを入力不可にするといったものを実装しました。

<input name="" type="checkbox" value="" id="test_chk" />
<label for="test_chk">chk1</label>
<input name="" type="text" id="test_input" disabled="disabled" />

$('#test_chk').click(function(){
 var flg=$(this).prop('checked')
    $('#test_input').prop('disabled',flg);
});

クリックの間隔をあけて行う分には問題なく動くのですが、
クリックを連打した際に、チェックOFFの時に入力不可になったりチェックONのときに入力可になったり逆転してしまいます。

職場ではIEを使っていて、自宅でも同じようにやってみたのですが連続的なクリックを行っても問題なく動作しました。

なにが原因なのでしょうか？また、どうやって回避すればいいのでしょうか？

退会済みユーザー

2017/06/17 11:16

ASP.NET のタグが付いてますが、質問を見る限り ASP.NET と直接の関係はなさそうに見えます。関係なければ ASP.NET のタグは外していただけると幸いです。

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

回答2件

ベストアンサー

checked 属性

まず、気になったのはHTMLの部分。

HTML
1<input name="" type="checkbox" value="" id="test_chk" />
2<label for="test_chk">chk1</label>
3<input name="" type="text" id="test_input" disabled="disabled" />

チェックボックスにチェックすると #test_input が disabled 状態になりますが、既に disabled 状態になっているので初めの一回のクリックでは何も発生しません。
チェックボックスには初期状態で checked 状態にしておくと良いと思います。

考えられる原因

直接的な原因は分かりませんが、考えられる可能性は2通りあります。

チェックボックスの状態遷移だけ発生し、clickイベントハンドラが実行されなかった
clickイベントハンドラだけ実行され、チェックボックスの状態遷移が発生しなかった

clickイベントハンドラの方が後で発生する為、1. の可能性が高いと思われます。
ご掲示のコードは途中経過のclickイベントハンドラが発火しなかったとしても、最後のclickイベントハンドラが実行されれば期待撮りの動作するはずなので、少なくとも最後のclickイベントハンドラは発生していないと想像できます。

対策コード

対策は2通りあります。

素のJavaScriptでコードを書き、clickイベントハンドラの処理時間を短くする(高速化による処理堕ち防止)
clickイベントハンドラ処理中はclickされても何も実行しないようにclickイベントをロックする

両方の対策を施すと、次のように書けます。

HTML
1<input name="" type="checkbox" value="" id="test_chk" />
2<label for="test_chk">chk1</label>
3<input name="" type="text" id="test_input" disabled="disabled" /><script>
4'use strict';
5document.getElementById('test_chk').addEventListener('click', {
6  input: document.getElementById('test_input'),
7  handleEvent: function (event) {
8    var checkbox = event.target;
9    checkbox.disabled = true;
10    this.input.disabled = checkbox.checked;
11    checkbox.disabled = false;
12  }
13}, false);
14</script>

ただ、checkbox変数初期化が余計に発生しているので、checkbox.disabled = true; によるclickイベントロックが発生するまでの間にクリックされる可能性を考慮すると、ロックせずに1行でコードを実行した方がいい可能性もあるかもしれません。

JavaScript
1document.getElementById('test_chk').addEventListener('click', {
2  input: document.getElementById('test_input'),
3  handleEvent: function (event) {
4    this.input.disabled = event.target.checked;
5  }
6}, false);

これ以上、高速化しようとするなら event.target, this.event のプロパティ参照コストをなくす為に変数やthis値にinput要素ノードを束縛する必要があります。

JavaScript
1document.getElementById('test_chk').addEventListener('click', function (event) {
2  this.disabled = true;
3  document.getElementById('test_input').disabled = this.checked;
4  this.disabled = false;
5}.bind(document.getElementById('test_chk')), false);

#test_input はキャッシュしていないのでまだ高速化する余地がありますが、#test_chk が無効化(disabled)されるまでの処理時間としてはこれが最短のコードだと思います。
短時間で連続クリックすると、チェックボックスの遷移が行われない現象を確認できます。

Re: SUPER_SLiNKY さん

投稿2017/06/18 01:03

編集2017/06/18 01:04

think49

総合スコア18164

SUPER_SLiNKY

2017/06/18 01:28

ありがとうございます。一度試してみたいと思います

think49

2017/06/20 08:31

2日経過しましたが、試した結果はいかがでしたでしょうか。掲示板のログは共有資産ですので、解決法を追記する事で、他の皆さんの役に立つこともあると思います。 https://teratail.com/help/question-tips#questionTips4-2

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

クリックイベントが発生してその処理が終わる前にクリックイベントが実行されたために意図しない動きになったのではないでしょうか？他にも方法はありますが、フラグを設置して、クリックされたらフラグをfalseに、クリックイベントが終わったらtrueに戻すというようにするとクリックイベントの発生が重複することを回避できると思います。また、チェックボックスにchecked属性を設定しておいたほうが良いと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<input name="" type="checkbox" value="" id="test_chk" checked>
9<label for="test_chk">chk1
10    <input name="" type="text" id="test_input" disabled="disabled">
11</label>
12<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
13<script>
14    var flag = true;
15    $('#test_chk').click(function () {
16        if (flag) {
17            flag = false;
18            var flg = $(this).prop("checked");
19            $('#test_input').prop('disabled', flg);
20            flag = true;
21        } else {
22            return false;
23        }
24    });
25</script>
26</body>
27</html>