ブートストラップjQuery「アクティブ」セレクタイベント

私のウェブページには、フィルタリングのための3つのチェックボックスがあり、標準チェックボックスではなく「チック」を使用するためにブートストラップで「スタイライズ」されています。ブートストラップjQuery「アクティブ」セレクタイベント

のフルマークアップ

<!DOCTYPE html> 
<html> 
<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <style> 
     .RAGStatus2 { 
     } 

      .RAGStatus2 .active .checked { 
       display: inline-block; 
      } 

      .RAGStatus2 .checked { 
       display: none; 
      } 
    </style> 


</head> 
<body> 
    <span class="RAGStatus2 pull-right"> 
     <span class="btn-group" data-toggle="buttons"> 
      <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue"> 
       <input disabled="disabled" type="checkbox" id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" /> 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
      </label> 
      <label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber"> 
       <input disabled="disabled" type="checkbox" id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" /> 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
      </label> 
      <label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red"> 
       <input disabled="disabled" type="checkbox" id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" /> 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
      </label> 
     </span> 
    </span> 

    <textarea id="debug" style="width: 100%; height: 300px"></textarea> 

    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 


    <script type="text/javascript"> 
     $(function() { 
      $(".ragButtons").change(function (e) { 
       $("#debug").val(""); 
       $(".ragButtons").each(function() { 
        if ($(this).hasClass("active")) { 
         $("#debug").val($("#debug").val() + $(this).attr("id") + "\r\n"); 
        } 
       }); 
      } 
      ); 
     }); 
    </script> 
</body> 
</html>

ここ=>https://jsfiddle.net/0qrqcbvd/

jsfiddleは今、私の問題は、私はボックスのいずれかをクリックしたとき、私はアクティブフィルタでAJAX呼び出しを作りたいということですですclick（）イベントは時間内にボタンを無効にしません。常に後ろに1歩です。

フォームが開かれると、3つすべてがアクティブに設定されます。

クリックしてオフにするボタンのいずれかが、デバッグはまだ3つのすべての
が戻ってオンに再びそれをクリックして示し、デバッグは今それをクリック
2（私たちがクリックしているものが表示されていない）を示し、 3回目（もう一度オフ）、もう一度、3回すべてをもう一度表示します（2にする必要があります）。私は「onMouseUpの」で試してみたが、私はこのスニペットを投稿すると

* UPDATE *

同じ結果を得るために、私が行うブートストラップ/ jQueryの最新バージョンを使用

実際に問題を解決するため、しかし、このコードはから抽出された実際のシステムでは、ブートストラップ3.0.0とjQuery 1.10.2

はここで最新jsFiddle =>https://jsfiddle.net/0qrqcbvd/16/

のuses

出典

2016-08-03 Chris Hammond

BUTTON DATA-APIは委任イベントハンドラを使用してチェックボックスの状態を切り替えるためです。

ソリューションは、私があまりにもすぐに話を聞いた...私はjsFiddleを設定するときに....

$(function() { 
 
    $(".ragButtons").change(function(e) { 
 
    $("#debug").val($(".ragButtons.active").map(function() { 
 
     return this.id; 
 
    }).get().join('\r\n')); 
 
    }); 
 
});

.RAGStatus2 {} .RAGStatus2 .active .checked { 
 
    display: inline-block; 
 
} 
 
.RAGStatus2 .checked { 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-1.10.0.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<span class="RAGStatus2 pull-right"> 
 
     <span class="btn-group" data-toggle="buttons"> 
 
      <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue"> 
 
       <input disabled="disabled" type="checkbox" checked id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" /> 
 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
 
</label> 
 
<label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber"> 
 
    <input disabled="disabled" type="checkbox" checked id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" /> 
 
    <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
 
</label> 
 
<label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red"> 
 
    <input disabled="disabled" type="checkbox" checked id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" /> 
 
    <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
 
</label> 
 
</span> 
 
</span> 
 

 
<textarea id="debug" style="width: 100%; height: 300px"></textarea>

出典

2016-08-03 09:20:37

OKのようbuttonプラグインによってトリガchangeイベントを使用することです。..私は最新のjQuery（3.1.0）を使用しましたが、私のシステムは1.10を使用していましたが、それでも動作しません。 –

@ChrisHammond 1.10と一緒に作業しています –

ブートストラップjQuery「アクティブ」セレクタイベント

答えて

関連する問題