I have a form with multi checkbox which is required field that I turned into twitter bootstrap toggle buttons.
I am trying to activate a selection button with js, by adding 'active' class to it.
I am able to add the class but when saving the form I am getting an error that the field is required.
What am I missing?
Here is the form.
<div id="reminder">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_1" value="1" title="Choose at least one reminder option">Now</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_2" value="30" title="Choose at least one reminder option">30m</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_3" value="60" title="Choose at least one reminder option">1h</label>
<label class="btn btn-primary active">
<input type="checkbox" name="reminder" id="id_reminder_4" value="120"
title="Choose at least one reminder option">2h</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_5" value="1440"
title="Choose at least one reminder option">1d</label>
</div>
</div>
This is how I am adding the class:
$('#reminder label:eq(3)').addClass('active')
You're only adding the class, but you don't actually select it. Add the selected attribute and it will work:
$('#reminder label:eq(3)').addClass('active').attr('selected',true);
Here is a demo
Add class open not active to open the dropdown (if thats what you are trying to do). You have to add the class to <li class='dropdown open'> which hosts the <ul class='dropdown-menu'>
btn-primary is the css that will make your buttons blue. It looks like this is what you are using for inactive buttons because the way you have your code, all the buttons should be blue. If you are trying to make the button grey because grey will be your active button, then you can use removeClass('btn-primary'). This will turn it grey. Hope this helps.
Related
I have a form with some input fields (text-input). Then i have a button at the bottom that says "Continue" and inside the form is a collapse-div (bootstrap 4). When the button is clicked the button moves to the bottom and two checkboxes are visible.
My goal is to make this button act like this:
First time click, the div collapses open and two checkboxes are visible
The button moves down (working at this point) and the submit button changes text to "continue" to "Submit" and it should work as a submit button (not collapse the div again)
This is the code:
<div class="collapse" id="collapseExample">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
label for checkbox 1
</label>
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
label for checkbox 2
</label>
</div>
</div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Continue</button>
I could either use jQuery to remove the first button and append/add a submit button but what would be the best method (use the same button or remove it and append a new submit button). Something ala this:
$('button[data-toggle="collapse"]').click(function() {
/* Remove the "continiue"-collapse button and append a new one */
});
If someone have any idea it would be nice to get som input.
Thanks!
I have created a series of radio buttons using boostrap version 3.3.7. I have also added a functionality such that when I click on one of those buttons the color of the radio button has to permanently change to blue. it all works fine when I load jQuery plugin with version bootstrap as shown below
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But this will cause an error to toggle button which I have implemented and it is supposed to work as a dropdown list. If I Reverse the order in which jquery and bootstrap have been loaded then the dropdown will work all good causing an error with radio buttons. I would like to mention that radio button and toggle button are different features which I am working on. This has become a tricky problem to solve. Could I know which version of jquery would work for both the features which can be compatible with Bootstrap version 3.3.7 Please find the code below.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">
<i class="glyphicon glyphicon-dashboard"></i>
Dashboard
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" name="MontageSwap" id="MontageSwap"
onchange="montageSwap(this.value);">
<i class="glyphicon glyphicon-duplicate"></i>
Montage
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Car</li>
<li>Bus</li>
<li>Bicycle</li>
</ul>
</li>
<style>
.btn-default {
color: #D8D8D8;
background-color: #D8D8D8;
border-color: #D8D8D8;
}
.btn-default:hover {
background-color: #5F5A66;
}
.btn-default.active {
background-color: #4A90E2;
}
</style>
<div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" autocomplete="off"
onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click", function () {
$(this).addClass('active');
});
</script>
How radio buttons are supposed to work
How they are actually working for me
There is nothing wrong with the compatibility of bootstrap and jquery. When you are using a radio button, there can only be one active button. And since you added blue color only to those with active class, upon clicking another button, the active class gets transferred to the newly clicked button.
The only reason why the radio button gets fixed when you switch the position of the jquery and bootstrap is because bootstrap is not working anymore and causes bugs. The best way you can achieve the behavior that you want is by using checkbox instead of radio.
But if you want to insist on using radio button, you need to make another class for your color. Here's what I did, from your css code:
.btn-default.active {
background-color: #4A90E2;
}
I changed it to:
.btn-default.color {
background-color: #4A90E2;
}
and added:
.btn-default.focus{
background-color: #4A90E2 !important;
}
to override the focus class when you click on the element.
for the script, i changed the active to color
$('.btn.btn-default').on("click", function () {
$(this).addClass('color');
});
To get rid of the small square below the bar that you created, I added this:
input[type=radio]{
margin-top:-6px;
}
You may visit the JSBin sample here
As you can see there, both the functions are working fine. :)
Quick question I have 3 checkbox's
I want to make the text next to them white, and by text next to time I mean the YES part
any idea's ?
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<input type="checkbox" value="No" id="sound">Yes
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<input type="checkbox" value="No" id="text">Yes
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">Yes
</div>
Probably a span is easiest:
<h4><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">
<span class="whiteText">Yes</span>
</div>
CSS:
.whiteText {
color: white;
}
Or with inline styling by replacing the class with a style="color:white;".
You can kill two birds with one stone by giving all your checkbxes and radio buttons labels, with a "for" attribute.
This firstly allows you to attach CSS to the label (give the label an id for this). But it is also the correct way to script checkboxes and radios these days, to make your web site accessible to the disabled. People who have impaired eyesight, or impaired handling, have difficulty clicking items as small as checkboxes. A labels becomes selectable along with the checkbox it is attached to, providing a much bigger area for the user to click on. It's good practice these days, especially if you do professional web development.
Just add a label and style the label. I ll use inline styles here but it's best practice to separate html and CSS
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<label style="color:white;"><input type="checkbox" value="No" id="sound">Yes</label>
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="text">Yes</label>
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="flash">Yes</label>
</div>
After much work I have managed to move all the information from the Customization page on a Bundled Product to the front page. I now want to hide the buttons that direct the user to the customization page. Both buttons however use the save class name.
There are two separate buttons on this page : I need to hide the first button
Button 1 which is:
<div class=“product-shop”>
<div class’Product-main-info”>
<div>
<button class="button btn-cart" type="button" onclick="Enterprise.Bundle.start();">
<span>
<span>Customize and Add to Cart</span>
</span>
</button>
</div>
</div>
Button 2 is:
<div class="add-to-cart">
<label for="qty">Qty:</label>
<input id="qty" class="input-text qty" type="text" title="Qty" value="1" maxlength="12" name="qty">
<button class="button btn-cart" onclick="productAddToCartForm.submit(this)" title="Buy Now" type="button">
<span>
<span>Buy Now</span>
</span>
</button>
</div>
I have tried hiding the button using CSS however have only been able to switch both buttons off. This the last step in a long Magento GO customization project. Any help much appreciated.
Regards
Mark
I'm using some bootstrap related js that enables the use of checkboxes through html like:
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxA" checked="checked">
<i class="icon-unchecked checked"></i>
Item one checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxB" id="2">
<i class="icon-unchecked"></i>
Item two unchecked
</label>
</div>
Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?
Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.
<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>
Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.
http://jsfiddle.net/jX6m2/3/