ブートストラップラベルのチェックボックスが機能しない

私はこれをフォローしようとしていましたtutorial私の角型アプリケーションのボタンとしてチェックボックスが表示されていましたが、何かがうまくいかず、チェックボックスの値が変更されず、：私はboostrap.jsスクリプト（またはclass="btn btn-primary"）を削除する場合ブートストラップラベルのチェックボックスが機能しない

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary"> 
 
      <input type="checkbox" onclick="alert('is not shown')"> Click me <!-- Here --> 
 
     </label> 
 
    </div> 
 
</body> 
 
</html>

は

しかし、それは動作します：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary"> 
 
      <input type="checkbox" onclick="alert('is shown !')"> Click me 
 
     </label> 
 
    </div> 
 
</body> 
 
</html>

0私はbootstrap.jsスクリプトを削除せずにこの作業を行うにはどうすればよい

？

出典

2017-04-13 ZwoRmi

用のカスタムCSSを追加し,,することができますそのボタンのクラス/ IDによるターゲティングを使用しますか？ –

私はそれを得る..クール！ –

I「がないのonchange/onclickのブラウザの呼び出しによってけどJSを経由して、そのボタンをバインドすることをお勧め入力

.btn-group input[type=checkbox]{ 
    clip: initial !important; 
    cursor: pointer; 
    height: 29px; 
    left: 0; 
    opacity: 0; 
    pointer-events: initial !important; 
    top: 0; 
    width: 100%; 
}

https://jsfiddle.net/xt3b88z2/

出典

2017-04-13 12:41:48

なぜこのCSSはこの問題を解決しますか？ – ZwoRmi

ポインタイベントはbootstrap.cssによってnoneです。 –

私は毎日何か新しいことを学びます。 –

onchangeを使用してください。チェックボックスonchangeは、onclickより意味があります。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-primary"> 
 
     <input type="checkbox" onchange="alert($(this).is(':checked'))">Click me 
 
    </label> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-04-13 12:38:10 Pugazh

@ZwoRmi：あなたは 'val（）'を使っていますが、 '（$（this））.is（"：checked "））;'を使う必要があります。更新された答えを見てください！ – Pugazh

ブートストラップラベルのチェックボックスが機能しない

答えて

関連する問題