ボタングループの活性、非活性の制御ができるJqueryのプラグイン化をしたい

###困っているところ・躓いているところ
データ属性が連番で増えていくこと想定したプログラムを組みたいのですが、
繰り返し処理を複数要素に対してかけるところから躓いております。
また、関数の引数に対しての条件分岐の方法も模索しております。

###前提・実現したいこと
ボタングループの活性、非活性の制御ができるJqueryのプラグイン化を考えております。
関数の引数に「0」の値を入れたら「disable」、「1」の値を入れたら「enable」の制御を行いたいです。

■HTML

<div class="item button" data-item="1">オプション1-1</div> <div class="item button" data-item="2">オプション1-2</div> <div class="item button" data-item="3">オプション1-3</div> ・・・ <div class="item button" data-item="8">オプション1-8</div>

■JQuery

のように、ボタン要素の上から順番に引数の指定をすれば、enable・disableの制御を行える様にしたいです。
また、疑似的なdisable状態を
「.button」クラスの状態、「e.preventDefault();」でクリックイベントの処理をキャンセルしたいと考えております。

長文になり申し訳ございませんがご教授よろしくお願いいたします。

###コード

html
1<!-- 商品グループA -->
2<div class="groupA">
3    <div id="selectOption1">
4        <h3>オプション1を選択</h3>
5        <div class="item button" data-item="1">オプション1-1</div>
6        <div class="item button" data-item="2">オプション1-2</div>
7        <div class="item button" data-item="3">オプション1-3</div>
8    </div>
9    <div id="selectOption2">
10        <h3>オプション2を選択</h3>
11        <div class="item button" data-item="1">オプション2-1</div>
12        <div class="item button" data-item="2">オプション2-2</div>
13        <div class="item button" data-item="3">オプション2-3</div>
14    </div>
15</div>
16<!-- //商品グループA -->
17<!-- 商品グループB -->
18<div class="groupB">
19    <div id="selectOption1">
20        <h3>オプション1を選択</h3>
21        <div class="item button" data-item="1">オプション1-1</div>
22        <div class="item button" data-item="2">オプション1-2</div>
23        <div class="item button" data-item="3">オプション1-3</div>
24    </div>
25    <div id="selectOption2">
26        <h3>オプション2を選択</h3>
27        <div class="item button" data-item="1">オプション2-1</div>
28        <div class="item button" data-item="2">オプション2-2</div>
29        <div class="item button" data-item="3">オプション2-3</div>
30    </div>
31</div>
32<!-- //商品グループB -->

javascript
1$(function() {
2    //defaultで「商品グループB」ボタングループは非表示
3    $('.groupB').css('display', 'none');
4
5    //「商品グループA」と「商品グループB」の表示切替
6    $('.btn-a').on('click', function() {
7        $('.mod-usual').show();
8        $('.mod-regular').hide();
9    });
10    $('.btn-b').on('click', function() {
11        $('.mod-usual').hide();
12        $('.mod-regular').show();
13    });
14
15    //ボタンの非活性 
16    function btnDisable(e) {
17        e.preventDefault();
18        return false;
19    }
20
21});

css
1/* ボタンが「enable」、選択できる状態のクラス */
2.button-click {
3    border: 1px solid #332821;
4    color: #332821;
5    cursor: pointer;
6    box-shadow: 0px 0px 5px #332821;
7    border-radius: 5px;
8    -webkit-border-radius: 5px;
9    -moz-border-radius: 5px;
10}
11
12/* ボタンがマウスオーバーされた状態のクラス */
13.button:hover {
14    border: 1px solid #000;
15    color: #000;
16    opacity: 0.8;
17    box-shadow: 0px 0px 5px #CCC;
18}
19
20/* ボタンが「disable」、ニュートラルの状態のクラス */
21.button {
22    border: 1px solid #332821;
23    color: #332821;
24    cursor: pointer;
25    opacity: 0.6;
26    border-radius: 5px;
27    -webkit-border-radius: 5px;
28    -moz-border-radius: 5px;
29}

###試したこと

javascript
1
2    //プラグイン側
3    (function($) {
4        //プラグイン定義
5        $.fn.btnControl = function(btnDecision) {
6
7            //enable,disableの判別
8            var btnDecision;
9            //対象のボタンを格納
10            var btnObjects = $(this).data('item');
11
12            return this.each(function(btnObjects) {
13                if (btnDecision == 1) {
14                    $(this).addClass('button-click');
15                } else if (btnDecision == 0) {
16                    return false;
17                }
18            });
19
20            //【確認用】クリックイベントがキャンセルされているか
21            $(this).click(function() {
22                alert('クリックイベントチェック');
23            });
24
25        };
26    })(jQuery);
27    
28    
29    //呼び出し側
30    var groupA = $('.groupA #selectOption1 div');
31
32    $(function() {
33        $(groupA).btnControl(1, 0, 0);
34    });

###試したこと2

javascript
1
2   
3    $(function() {
4        //defaultで「商品グループB」ボタングループは非表示
5        $('.groupB').css('display', 'none');
6
7        //「商品グループA」と「商品グループB」の表示切替
8        $('.btn-a').on('click', function() {
9            $('.groupA').show();
10            $('.groupB').hide();
11        });
12        $('.btn-b').on('click', function() {
13            $('.groupA').hide();
14            $('.groupB').show();
15        });
16
17        //ボタンの非活性
18        function btnDisable(e) {
19            e.preventDefault();
20            return false;
21        }
22
23    });
24
25    (function($) {
26        //プラグイン定義
27        $.fn.btnControl = function(btnDecision) {
28
29            this.each(function() {
30                if (btnDecision == 1) {
31                    $(this).addClass('button-click');
32                } else if (btnDecision == 0) {
33                    element.onmousedown = function (e){event.preventDefault()};
34                }
35            });
36
37            //【確認用】クリックイベントがキャンセルされているか
38            $(this).click(function() {
39                alert('クリックイベントチェック');
40            });
41
42        };
43    })(jQuery);
44
45    
46
47    //ターゲット
48    var groupA = $('.groupA #selectOption1 div');
49
50    $(function() {
51        $(groupA).btnControl(1, 0, 0);
52    });
53

###成果物

javascript
1//呼び出し側
2$(function() {
3    //グループセレクタ
4    var groupA = $('.mod-usual #selectRoast div');
5    var groupB = $('.mod-usual #selectBeans div');
6    //ボタンのenable・disableの切り替え
7　　　$(groupA).btnControl(1, 1, 0);
8　　　$(groupB).btnControl(1, 0, 0);    
9
10});
11
12//プラグイン側
13$(function() {
14    //defaultは「定期商品」ボタングループは非表示
15    $('.groupB').css('display', 'none');
16
17    //「通常商品」と「定期商品」の表示切替
18    $('.btn-a').on('click', function() {
19        $('.mod-usual').show();
20        $('.mod-regular').hide();
21    });
22    $('.btn-b').on('click', function() {
23        $('.mod-usual').hide();
24        $('.mod-regular').show();
25    });
26
27    //選択状態のボタン
28    $("#groupA div, #groupB div").on("click", function() {
29        var id = $(this).parent();
30        var length = $(id).find(".button").length;
31        var num = $(id).find(this).data("item");
32
33        for (i = 0; i < length + 1; i++) {
34            $(id).find('.is-decision').removeClass('is-decision').addClass("is-cancel").fadeTo(500, 0.6);
35        }
36
37        $(id).find('[data-item="' + num + '"]').removeClass('is-cancel').addClass('is-decision').fadeTo(250, 1);
38    });
39});
40
41// enable,disableの判別
42(function($) {
43    $.fn.btnControl = function() {
44        var btnDecision = Array.prototype.slice.call(arguments);
45        return this.each(function(index, btnObjects) {
46            if (btnDecision[index]) {
47                $(btnObjects).addClass('button-click').removeClass('button-noclick');
48            } else {
49                $(btnObjects).removeClass('button-click').addClass('button-noclick');
50            }
51        });
52    };
53})(jQuery);

css
1.button-click,
2.is-cancel {
3    border: 1px solid #332821;
4    color: #332821;
5    cursor: pointer;
6    box-shadow: 0px 0px 5px #332821;
7    border-radius: 5px;
8    -webkit-border-radius: 5px;
9    -moz-border-radius: 5px;
10    opacity: 0.8 !important;
11}
12
13.button-noclick {
14    pointer-events: none;
15}
16
17.is-decision {
18    background-color: #eeeeee;
19}

kei344

2017/09/20 10:54

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

freedomman

2017/09/20 11:32

投稿の仕方のアドバイスありがとうございます。投稿を編集致しました。

kei344

2017/09/20 11:46

if(decision = 0) は転記ミスでしょうか？また、プラグインより前に挙動自体を作成されてはいかがでしょうか。

freedomman

2017/09/20 15:42

試したことを編集しました。現在の記述ですと「1」と「0」の引数の指定で「1」の時は「button-click」のクラスがつき「0」を指定したときはクリックイベントのキャンセルができたと思います。これを対象のセレクタ内のデータ属性を指定しているdiv毎に指定をしていきたいと思っております。

freedomman

2017/09/21 04:29

参考文献のリンクありがとうございます。「arguments」を試してみましたが、うまく動作しませんでした。記述の仕方が間違っているのだと思いますが、どこを修正していいかがわかりません。

kei344

2017/09/21 04:45

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

freedomman

2017/09/21 06:48

ありがとうございます。「each」で試しましたが、クリックイベントのキャンセルとaddClassの挙動が両方出てしまい、引数の複数指定もできませんでした。

x_x

2017/09/21 07:23

クリックイベントのキャンセルというのは何を指していますか？見たところイベント処理に関する記述はないようですが

freedomman

2017/09/21 07:33

input要素ではないのでdisableを使わず「return false;」で指定している箇所になります。

x_x

2017/09/21 07:42

ちょっとわかりません。each()はcallbackを即座に実行します。そこでreturn falseとすればループを終了するだけです。これ自体はイベントとは関係がありません。http://api.jquery.com/each/

freedomman

2017/09/21 08:42

https://t87r.wordpress.com/2011/05/26/how-to-disable-events-related-to-mouse-and-click-of-a-particular-element-by-javascript/のURLを参考に「試したこと2」を追記しました。

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

回答2件

ベストアンサー

まだ仕様がはっきりとしていないと思いますが、現状でするとすれば、
CSSに一つ追加しておきます。

CSS
1.button-noclick {
2    pointer-events: none;
3}

JavaScript
1    $.fn.btnControl = function() {
2        // enable,disableの判別
3        var btnDecision = Array.prototype.slice.call(arguments);
4
5        return this.each(function(index, btnObjects) {
6            if (btnDecision[index]) {
7                $(btnObjects).addClass('button-click').removeClass('button-noclick');
8            } else {
9                $(btnObjects).removeClass('button-click').addClass('button-noclick');
10            }
11        });
12    };

投稿2017/09/21 08:50

x_x

総合スコア13749

x_x

2017/09/21 08:52

なぜか途中で切れました。とりあえず「CSSに一つ追加します。」

freedomman

2017/09/21 08:56

すみません、ありがとうございます。挙動確認させていただきます。

freedomman

2017/09/21 09:10 編集

$(function() { $(groupA).btnControl(0, 1, 0); }); と引数を複数指定しましたが、挙動は意図した動きになりました。 pointer event: noneはIE10以下は対応していないですが、IE9まで対応したい場合の記述方法はありますか？いろいろすみませんがアドバイスお願いします。

x_x

2017/09/21 09:29

どこのイベント処理の話なのかで方法が変わってくると思います。質問への追記依頼はそのためです。 pointer-events: noneの代替はこの記事にあるようです。 https://tetrachroma.co.jp/blog/140522_ad_disable-links/

freedomman

2017/09/21 15:11

参考文献ありがとうございます。現在のCSSに追加して動作確認をしてみます。

freedomman

2017/09/26 07:54

今回はIE10以下を捨てることにしました。この度は本当にありがとうございました。最終的な成果物を追記させて頂きました。

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