Twitter Bootstrap Question posted in

Twitter bootstrap – Change btn color when clicking menu checkbox option

I am trying to have a button change color when a user clicks one of the options from a menu listing. Is this possible?
For btn_clear, I would like the background-color to change automatically immediately to BLUE upon click of one of the menu options, and for btn_apply the same but color change to RED.
So for example, for category “Products” a user clicks “Alpha” and then the button color changes take effect automatically immediately.

Please see my FIDDLE… FIDDLE
(SA snippet doesnt seem to want to work… sorry).

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

$("checkbox").on("click", function(e) {
  e.preventDefault();
  
  var i = $("li").index( $(this).parent() );
  
  if ( i === 1 ) {
    $('btn_clear').css('background', 'blue');
  } else if ( i === 2 ) {
    $('btn_apply').css('background', 'red');
  }
  
});
.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.checkbox :hover {
      background-color:red;
      cursor:pointer;
    }

.div_form :hover {
      background-color:green;
      cursor:pointer;
    }

.btn_clear {
    float: right;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 29px;
	text-align: center;
    background-color:grey
  }
  
.btn_apply {
    float: left;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 17px;
	text-align: center;
    background-color:yellow
    }


.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 30px;
	padding-right:30px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
}

.div_form {
	position: absolute;
	bottom: 0;
	bottom: -70px
}

.btn {
	border-radius:0;
	margin-top:5px
}

.dropdown-menu {
	border-radius:0;
	border:5px solid blue
}

.typeahead {
	width:90%;
	margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<div class="btn-toolbar">
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Products</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu" style="margin-left: 2em">
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
                    <label><input value="" type="checkbox"> Alpha</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Beta
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Gamma</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Delta</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Omega</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Koppa
                    </label>
                </div>
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--Success buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Availability</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu" style="margin-left: 2em">
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
                    <label><input value="" type="checkbox"> One</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Two
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Nine</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Eight</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Seven</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Fifteen
                    </label>
                </div>
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--Warning buttons with dropdown menu-->
    </div>
Tags:

2

Answers


  1. 0

    This will change the colors of both of the buttons when one option is selected:

    $(".checkbox").on("click", function(e) {
  $('.btn_clear').css('background-color', 'blue');
  $('.btn_apply').css('background-color', 'red');
});

    Snippet:http://www.bootply.com/0CQWCAtU2s

    Login or Signup to reply.
  2. 0

    Yes, it is possible http://www.bootply.com/rb3Uyw68Zg

    but you have a few issues with your code, I added some “console.log” the see what was going on there

    first you were missing a “.” in your selectors, to change

    if ( i === 1 ) {
  $('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
  $('btn_apply').css('background', 'red');
}

    into

    if ( i === 1 ) {
  $('.btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
  $('.btn_apply').css('background', 'red');
}

    also 

    var i = $("li").index( $(this).parent() );

    is always resulting -1, so you never get into those ifs, you’ll have to fix this line for your background color changes to get called.

    this is the code after my changes http://www.bootply.com/rb3Uyw68Zg

    EDIT

    to restrict the handling of clicks per menu, you can use the descendant selector, so you should change:

    $(".checkbox").on("click", function(e) {

    into 

    $(".products .checkbox").on("click", function(e) {

    that means, you will only handle clicks to checkboxes that are children of “.products” (you also have to add products class to your dropdown)

    here’s an updated example: http://www.bootply.com/QoIe6kIt2e

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search