が灰色のまま

Question

私はTwitterのブートストラップ3を使用して、このコードを持っている：私は、「アップル」をクリックすると、そのボタン（チェックボックス）は灰色である

<div class="btn-group" id="day-group" data-toggle="buttons"> 
    <label class="btn btn-default"> 
     <input name="fruits" id="apple" value="1" type="checkbox" />Apple 
    </label> 
    <label class="btn btn-default"> 
     <input name="fruits" id="orange" value="2" type="checkbox" />Orange 
    </label> 
</div> 

を。今すぐチェックされます。

「Apple」をもう一度クリックします。今はチェックされていません。しかしそれはまだ灰色です。他の場所をクリックした場合にのみ、白く表示されるので、そのチェックボックスはオフになっています。

他の場所をクリックすることなく、チェックを外した直後に白いボタン（チェックボックス）を表示したいと考えています。どうすればそれを達成できますか？ jQuery、CSSまたは他の方法？

Answer 1

これは、あなたのHTMLが正しくないことと関係している可能性があります。 formsのBootstrapのドキュメントを見ると、入力には次のものが使用されています。

<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
</div> 

だから、あなたの次の修正この

<div class="form-group"> 
    <label for="orange">Orange</label> 
    <input type="checkbox" class="form-control" id="orange" placeholder="Orange"> 
</div> 

Bootstrap on form controlsへ

<label class="btn btn-default"> 
    <input name="fruits" id="orange" value="2" type="checkbox" />Orange 
</label> 

- >無効化と非障害フォーム

を両方のチェックボックスを使用してブートストラップの例以下は、

<div class="checkbox"> 
    <label> 
    <input type="checkbox" value=""> 
    Option one is this and that&mdash;be sure to include why it's great 
    </label> 
</div> 
<div class="checkbox disabled"> 
    <label> 
    <input type="checkbox" value="" disabled> 
    Option two is disabled 
    </label> 
</div>