CODEWITHSUNDEEP
javascriptjquerycsshtml
Sidharth
Sidharth

Reputation: 1462

Change Button color to green when checkbox is checked

I want to change the color of button select menu when i click(check) on the checkbox.

Button to select menu:

<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>

need a javascript to change the color of button, tried many options and things, but nothing is working.

the id to my checkbox is dynamic and it keep getting change

Upvotes: 0

Views: 3367

Answers (3)

ab29007
ab29007

Reputation: 7766

Try this:

$("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>

Upvotes: 3

Zakaria Acharki
Zakaria Acharki

Reputation: 67515

Working fiddle.

You'v ejust to listen on checkbox click the add class green that will change the color of the button :

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

Hope this helps. 

$('#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>

Upvotes: 1

H.Mikhaeljan
H.Mikhaeljan

Reputation: 813

What you can do is add css to the button and switch the css with javascript.

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');
}

Should be something like this. can't test it 100% at the moment.

Upvotes: 0

Related Questions