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>
Related
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
})
});
I am trying to create a rather complex scenario. I'm just a newbie trying to learn javascript.
When a user clicks value in option-1, the lesser value in option-2 must be disabled and moved to a higher value. For instance, if a user selects 15 in option-1, than 10 and 15 must be disabled in option-2. Then, it must auto move the selected value to 20.
Note that if a user selects 5 in option-1, he/she can select any higher value in option-2.
$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
});
$('#option2 :radio').on('change', function() {
document.getElementById("value11").value = $(this).val();
document.getElementById("value12").value = $(this).val();
});
.container {
margin-top: 30px;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h6>Option 1</h6>
<div id="option1" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option" autocomplete="off"> 5</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option" autocomplete="off"> 10</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option" autocomplete="off"> 15</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20"id="option" autocomplete="off"> 20</label>
</div>
</div>
<div class="container">
<div class="form-group">
<input id="value1" value="5" class="form-control">
</div>
<div class="form-group">
<input id="value2" value="5" class="form-control">
</div>
</div>
<hr />
<div class="container">
<h6>Option 2</h6>
<div id="option2" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="10" id="option" autocomplete="off"> 10</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option" autocomplete="off"> 15</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option" autocomplete="off"> 20</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25"id="option" autocomplete="off"> 25</label>
</div>
</div>
<div class="container">
<div class="form-group">
<input id="value11" value="10" class="form-control">
</div>
<div class="form-group">
<input id="value12" value="10" class="form-control">
</div>
</div>
jsFiddle demo
You need to add a condition in the change event for the option1 elements where it takes the current value and compares it with values from the option2 and then adds the disable attribute to the lesser value than that selected.
You should change your code from this:
$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
});
To this:
$('#option1 :radio').on('change', function() {
document.getElementById("value1").value = $(this).val();
document.getElementById("value2").value = $(this).val();
var baseValue = parseInt($(this).val());
var option2List = $('#option2 :radio').filter(function() {
return parseInt($(this).val()) <= baseValue; //getting only the values lesser to the current and equal to it
});
$('#option2 :radio').removeAttr('disabled');//resetting the option2
$('#option2 label').removeClass('disabled');//resetting the labels
option2List.prop('disabled', 'disabled'); //disabling the lesser values
//below code adds the disabled class to the labels
$.each(option2List,function(){
$(this).closest('label').addClass('disabled');
});
$('#option2 :radio:enabled').first().click();//selects the first enabled element
});
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.
In my html form I have two different types of input with same $scope variable as model.
I have 3 radio buttons and a number input field
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="16" name="options" id="option1" > 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="32" name="options" id="option2" > 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="64" name="options" id="option3" > 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
But if I select one of the radio button inputs, it doesn't set the value.
Having two different inputs for the same scope variable causes conflicts?
Use ng-value instead of value
Like this
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="16" name="options" id="option1"> 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="32" name="options" id="option2"> 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="64" name="options" id="option3"> 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
DEMO
I need help with the validation.
That's my code:
HTML:
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
And the result:
Question: I wanna check if the user clicked on one of the buttons.
I tried to do:
if (calss10 === null)
I want to do this with: onekeyup=" "
This will solve your problem.
You need to create a function that runs when the user submit the form (onsubmit)
this is a form example:
P.S you need to add an id to every radio button id="class"
<form onsubmit="return Validate()">
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
</form>
function Validate() {
if (!Validate_Class())
return false;
}
function Validate_Class() {
if (!document.getElementById("class").checked) {
alert("אתה חייב לבחור כיתה!");
return false;
}
}
Wouldn't this get the job done?
var myClickedElement;
$('input[name="class"]').click(function(e) {
myClickedElement = $(this);
});