チェックボックスをオンにすると、ボタンの色が緑に変わります。

Question

ボタンの色を変更したいです。選択メニューチェックボックスをクリック（チェック）します。メニューを選択する

ボタン：

<button id="bttn" onclick="loadMenu()" data-toggle="modal" href="#myModalMenu" 
    class="btn btn-circle red-intense">Select Menu</button> 

がMODAL：

<div class="modal fade rotate" id="myModalMenu"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" 
        aria-hidden="true">×</button> 
       <h6 class="modal-title"></h6> 
      </div> 

      <div class="modal-body"> 
       <div class="portlet box orange-meadow"> 
        <div class="portlet-title"> 
         <div class="caption"> 
          <i class="fa fa-gift"></i>MENU 
         </div> 
        </div> 
       </div> 
       <div class="container"></div> 
       <div id="menuView"> 
<ul> 
        <li class="product-list-menu"><INPUT TYPE="CHECKBOX" id="checkbox_product" NAME="product" VALUE="product" onclick="manageMenuSelection(${product})"> product.name </li> 
<ul>     
       </div> 
       <div class="modal-footer"> 
        <button data-dismiss="modal" class="btn btn-circle red-intense">Ok</button> 
        <a href="#" data-dismiss="modal" class="btn">Skip</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

ボタンの色を変更するにはJavaScriptを必要とする、多くのオプションとの事を試してみましたが、何も作業していません。

私のチェックボックスのidは動的であり、それはあなたが何ができるの変化に

Answer 1

これを試してみてください：

はあなた `loadMenu（）`どこにあるの

$("input[class='myCheckbox']").click(function(){ 
 
    if($("#formID input:checkbox:checked").length > 0){ 
 
    
 
    $(".checkSubmit").addClass('active'); 
 
    } 
 
    else{ 
 
    $(".checkSubmit").removeClass('active'); 
 
    } 
 
});

.checkSubmit{ 
 
    background-color:red; 
 
} 
 
.checkSubmit.active{ 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="formID" action="demo_form.asp" method="get"> 
 
    <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 1<br> 
 
    <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 2<br> 
 
    <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 3<br> 
 
    <input class="myCheckbox" type="checkbox" name="vehicle" value="Bike"/> I have a bike 4<br> 
 
    <input class="checkSubmit" type="submit" value="Submit"> 
 
</form>

Answer 2

を得続けるには、ボタンにCSSを追加し、JavaScriptでCSSを切り替えています。

CSS

.buttoncolorred{ 
background-color: red; 
} 

.buttoncolorgreen{ 
background-color: green; 
} 

javascriptの

if(document.getElementById('#checkbox_product').checked) { 
    $("#ButtonID").removeClass('buttoncolorred').addClass('buttoncolorgreen'); 
} else { 
    $("#ButtonID").removeClass('buttoncolorgreen').addClass('buttoncolorred'); 
} 

は次のようなものであるべき。現時点で100％テストすることはできません。

Answer 3

Working fiddle。

You'vはcheckboxでリッスンするejustボタンの色を変更します追加クラス​​をクリックします。

$('#checkbox_product').on('click',function(){ 
    $('#bttn').toggleClass('green'); 
}) 

・ホープ、このことができます。

$('#checkbox_product').on('click', function(){ 
 
    $('#bttn').toggleClass('green'); 
 
});

.green{ 
 
    background-color:rgba(0, 128, 0, 0.39); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button id="bttn" data-toggle="modal" href="#myModalMenu" 
 
     class="btn btn-circle red-intense">Select Menu</button> 
 

 
<div class="modal fade rotate" id="myModalMenu"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" 
 
       aria-hidden="true">×</button> 
 
     <h6 class="modal-title"></h6> 
 
     </div> 
 

 
     <div class="modal-body"> 
 
     <div class="portlet box orange-meadow"> 
 
      <div class="portlet-title"> 
 
      <div class="caption"> 
 
       <i class="fa fa-gift"></i>MENU 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="container"></div> 
 
     <div id="menuView"> 
 
      <ul> 
 
      <li class="product-list-menu"> 
 
       <INPUT TYPE="CHECKBOX" id="checkbox_product" NAME="product" VALUE="product" onclick="manageMenuSelection(${product})"/> product.name </li> 
 
      </ul>  
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button data-dismiss="modal" class="btn btn-circle red-intense">Ok</button> 
 
      <a href="#" data-dismiss="modal" class="btn">Skip</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>