How prevent user to toggle a checkbox button created useing bootstrap buttongroups - javascript

I created a boostrap buttongroup for checkboxes, like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="checkbox" id="d1" />1</label>
<label class="btn btn-default"><input type="checkbox" id="d2" />2</label>
<label class="btn btn-default"><input type="checkbox" id="d3" />3</label>
<label class="btn btn-default"><input type="checkbox" id="d4" />4</label>
<label class="btn btn-default"><input type="checkbox" id="d5" />5</label>
<label class="btn btn-default"><input type="checkbox" id="d6" />6</label>
</div>
I would like to disable some of them using Js. I already tried:
$("#d2").attr("locked", true);
$("#d2").attr('disabled', true);
$("#d2").parent().attr('disabled', true);
$("#d2").parent().addClass('disabled');
It shows button as disabled HOWEVER it does not removes the functionality of it. when I click it still toggles the active state.
Disabled button 2
Disabled button 2 after click
How can I prevent user to toggle it? Here are an snippet exemple of this issue.
$("#d2").prop("checked", false);
$("#d2").prop("locked", true);
$("#d2").prop("disabled", true);
$("#d2").parent().prop('disabled', true);
.active {
background-color: green!important;
color: white!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="checkbox" id="d1" />1</label>
<label class="btn btn-default"><input type="checkbox" id="d2" />2</label>
<label class="btn btn-default"><input type="checkbox" id="d3" />3</label>
<label class="btn btn-default"><input type="checkbox" id="d4" />4</label>
<label class="btn btn-default"><input type="checkbox" id="d5" />5</label>
<label class="btn btn-default"><input type="checkbox" id="d6" />6</label>
</div>


You can try:
$("#d2").prop('disabled', true);
This works for me.

Related

JS/CSS/Bootstrap - styling selected button from button group

I have a basic button group like so:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" id="1" name="responses" value="1">
Poor
</label>
<label class="btn btn-secondary">
<input type="radio" id="2" name="responses" value="2">
Average
</label>
<label class="btn btn-secondary">
<input type="radio" id="3" name="responses" value="3">
Good
</label>
<label class="btn btn-secondary">
<input type="radio" id="4" name="responses" value="4">
Very good
</label>
<label class="btn btn-secondary">
<input type="radio" id="5" name="responses" value="5">
Excellent
</label>
</div>
And I want to be able to change the background color of the checked option.
I cannot figure out how to select this in CSS. I am aiming for either a JS or CSS solution.

the idea is to capture the input event on input element and apply a styling class to it's parent label, like so:
document.querySelectorAll('input').forEach(i => {
i.addEventListener('input', e => {
document.querySelectorAll('label').forEach(l => {
l.classList.remove('checked');
});
e.target.parentNode.classList.add('checked');
});
});
label.checked {
background-color: red !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" id="1" name="responses" value="1">
Poor
</label>
<label class="btn btn-secondary">
<input type="radio" id="2" name="responses" value="2">
Average
</label>
<label class="btn btn-secondary">
<input type="radio" id="3" name="responses" value="3">
Good
</label>
<label class="btn btn-secondary">
<input type="radio" id="4" name="responses" value="4">
Very good
</label>
<label class="btn btn-secondary">
<input type="radio" id="5" name="responses" value="5">
Excellent
</label>
</div>

when i click the open button a text box should appear in the page

when i click the active button a box should appear in the page , and when i click closed it should hide from page
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>

Use change event of radio button
$("input[name='options']").on('change',function(){
if($(this).attr('id') == 'option1'){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px" id="myDiv">MY DIV WILL BE HERE</div>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Closed
</label>
</div>

is that what you want ?
$(document).ready(function() {
$('input[name=options]').change(function(e) {
var isOpen = $(this).val() == "Open";
$('#box').toggle(isOpen);
});
});
#box {
padding-top: 15px;
}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary ">
<input type="radio" name="options" value="Open" id="option1" autocomplete="off" checked> Open
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" value="Closed" id="option2" autocomplete="off"> Closed
</label>
</div>
<div id="box">More Info</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can use a bootstrap modal and modal button to open a box on a button click. if you want to make a custom button then here is the code for in jquery.
$(document).ready(function()
{
$("button.active").on("click",function()
{
$(".page-box").toggle();
//page-box is the box container which you want to open
})
});

likert scale toggle effect missing-Bootstrap with Blaze Meteor

I have the following html displaying a scale 1-5, I get the value that is clicked but it seems as it does not toggle or change the color when a number is clicked it only changes the color temporarily as shown in file attached
<div class="row">
<div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="likert group">
<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
<a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
<label class="btn btn-success" >
<input type="radio" name="likert" value="1" autocomplete="off">1
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="2" autocomplete="off">2
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="3" autocomplete="off">3
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="4" autocomplete="off">4
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="5" autocomplete="off">5
</label>
<a class="btn btn-link disabled" disabled>Very Much</a>
</div>
</div>
</div>
</div>
How can I make it maintain the toggle effect once it is selected?Is there something missing from the above code ?
(I use Meteor Blaze framework with Bootstrap 4)

The solution was to add the below javascript file of npm module in meteor js file
import 'bootstrap/dist/js/bootstrap.bundle'

Using multiple bootstrap buttongroups in one page

Let's say I would like to have 2 different button groups on my page.
<div class="btn-group fruits" role="group" aria-label="fruits" id="fruits">
<button type="button" name="fruits" class="btn btn-default">apple</button>
<button type="button" name="fruits" class="btn btn-default">cherry</button>
<button type="button" name="fruits" class="btn btn-default">melon</button>
</div>
<div class="btn-group vegetables" role="group" aria-label="vegetables" id="vegetables">
<button type="button" name="vegetables" class="btn btn-default">cucumber</button>
<button type="button" name="vegetables" class="btn btn-default">aubergine</button>
<button type="button" name="vegetables" class="btn btn-default">pepper</button>
</div>
Whenever I click on a button, the selected button on other group became deselected.
I have added, different "ids", "names", "classes" to each buttongroup and button. But unfortunately no success. How can I have multiple buttongroups on a page without affecting eachother?
All the examples on official bootstrap page are even like that. When you click on o buttongroup, other buttongroup deselected. Bootstrap Button Group
Thanks for any idea.

Here is what you can do.
Checkbox / Radio
Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.
$('input').on('change', function () {
console.clear();
console.log(this.value)
})
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
margin: 12px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" value="left" autocomplete="off"> Left
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="middle" autocomplete="off"> Middle
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="right" autocomplete="off"> Right
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" value="left 2" autocomplete="off"> Left 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="middle 2" autocomplete="off"> Middle 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="right 2" autocomplete="off"> Right 2
</label>
</div>
</div>
</div>
</div>

How to automatically check a radio button based on another?

I have two (2) forms(div : wizard form):
The first form(div) asks the user to check a radio button
The second form (div) is for verification if the user want to change something
The problem is in the second form:
How I can automatically check the same radio button in the second form that the user checked in the first form?
I have a radio button the choose between YES and NO.
So, If the user selects the YES button, I need the YES button checked automatically in the second form(div).
The code:
yes_no = $('input[name="test"]:checked').val();
alert(yes_no);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
<div id="step2">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes_yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no_no" value="test2">NO</label>
</div>
</div>
</div>
</div>

As per my understanding I have created a fiddler for the same and coding standard(HTML naming) is bad.
https://jsfiddle.net/t651ujm0/5/
$("input[name='test']").click(function(){
$("input[name='test1'][value='"+$(this).val()+"']").attr('checked', 'checked');
});

$(document).ready(function(){
$('#step1 input').on('change', function() {
alert($('input[name=test]:checked', '#step1').val());
if($('input[name=test]:checked', '#step1').val()=='yes')
{
$('#yes1').prop("checked", true);
}
else
{
$('#no1').prop("checked", true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
<div id="step2">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test1" class="test" id="yes1" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test1" class="test" id="no1" value="test2">NO</label>
</div>
</div>
</div>
</div>

Can do any of this...
$("#radio_1").prop("checked", true)
For versions of jQuery prior to 1.6, use:
$("#radio_1").attr('checked', 'checked');

$(document).ready(function(){
$('#form1 input').on('change', function() {
alert($('input[name=test]:checked', '#form1').val());
if($('input[name=test]:checked', '#form1').val()=='yes')
{
$('.'+$('input[name=test]:checked', '#form1').val(),'#form1').prop("checked", true);
}
else
{
$('.'+$('input[name=test]:checked', '#form1').val(),'#form1').prop("checked", true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1" >
<div class="div1">
<input type="radio" name="test" class="test" id="yes" value="yes">YES
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="no">NO</label>
</div>
<div class="div2">
<input type="radio" name="test1" class="yes" value="yes">YES
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test1" class="no" value="no">NO</label>
</div >
</form>

I'd suggest something similar to the following approach, in which the elements are selected using a common custom, data-*, attribute which allows for simple selection and, having cached the collection, allows for easy filtering of that collection to target the appropriate elements to change.
Also, I've changed the name attributes a little into 'groups,' otherwise only one radio <input> from any number of elements sharing the same name property could be checked.
// caching the relevant elements, here we select <input> elements,
// of 'type=radio' which have a custom data-choice attribute:
var choices = $('input[type=radio][data-choice]');
// use the on() method to bind the anonymous function of the
// method as the event-handler for the 'change' event on
// those elements:
choices.on('change', function() {
// retrieving the value of the data-choice attribute
// dataset property of the changed element:
var choice = this.dataset.choice;
// filtering the cached collection of elements to those
// which have the 'data-choice' attribute which is equal
// to the value of the changed <input> element:
choices.filter('[data-choice=' + choice + ']')
// setting the 'checked' property of that element to the
// same state as the changed element:
.prop('checked', this.checked)
// this is just to visibly demonstrate the effectiveness
// and can be discarded in your use-case, however here
// we move to the parent elements of the retained
// <input> elements:
.parent()
// and add the 'checked' class to those parents:
.addClass('checked')
// selecting the sibling elements of those parents:
.siblings()
// and removing the 'checked' class:
.removeClass('checked');
});
label.checked {
color: limegreen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<!-- note that I've removed the id attribute from the
radio <input> elements, since you can use alternative
custom attributes to select, and group, them; here
we use the 'data-choice' custom attribute, with the
(obvious) values of 'yes' and 'no' to reflect the
user-choice: -->
<input type="radio" name="testGroup1" class="test" data-choice="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="testGroup1" class="test" data-choice="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
<div id="step2">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="testGroup2" class="test" data-choice="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="testGroup2" class="test" data-choice="no" value="test2">NO</label>
</div>
</div>
</div>
</div>
References:
CSS:
Attribute-selectors.
jQuery:
addClass().
filter().
on().
removeClass().
parent().
prop().
siblings().

Details are commented in Snippet
SNIPPET
// When DOM content is ready
$(function() {
var no = $('input[name="test"][value="no"]');
var yes = $('input[name="test"][value="yes"]');
var neg = $('input[name="result"][value="neg"]');
var pos = $('input[name="result"][value="pos"]');
// Delegate the click event on [no] only
no.on('click', function(e) {
neg.prop('checked', true);
});
// Delegate the click event on [yes] only
yes.on('click', function(e) {
pos.prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='f1' name='f1'>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
<input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="no" value="no">NO</label>
</div>
</div>
</div>
</form>
<form id='f2' name='f2'>
<fieldset>
<legend>Form 2</legend>
<label>
<input type='radio' name='result' value='neg'>Neg</label>
<label>
<input type='radio' name='result' value='pos'>Pos</label>
</fieldset>
</form>

Categories