Auto change and disable lesser value in another radio field - javascript

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

Related

How can I get current Value of Selected button from the following?

We have three buttons(English, Hindi & Urdu). How I can get the value of Selected button in JavaScript function?
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Urdu
</label>
</div>

Firstly set value to your radio buttons then get buttons and bind event listener.
and you can get value of button from event target as following:
let btns= document.getElementsByName("options");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",function(e) {
console.log(e.target.value);
});
}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked value="English">English
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"value="Hindi">Hindi
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="Urdu">Urdu
</label>
</div>

Try This:
https://jsfiddle.net/f7ed1o0n/
$('input[name="options"]').change(function(){
alert($(this).val());
$(this).parents('.btn-group').find('input[type="radio"]').attr('disabled',
'disabled');
});

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

showing different radio buttons when choosing specific button

I am trying to make radio buttons where person chose options and different options appear for him/her to chose from. my code is :
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options3" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
but the issue is I am not able to get active value when selecting certain radio button if I use data-toggle="buttons" in divs it works but js doesn't work that way. I need to make 2 or more lines of different radio buttons where they appear when some specific button is selected.

Use this code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn bg-olive">
<input type="radio" name="options4" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options5" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options6" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options7" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options8" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var radio_value=$(this).attr('id');
if(radio_value == 'wanted') {
$('.sec-row').show();
}else {
$('.sec-row').hide();
}
});
});
</script>
</html>

Use common name in radio button and pass value attribute too.
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="purpose" value="forSale" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="purpose" value="rent" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="purpose" value="wanted" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var value = $("input[name='purpose']:checked").val();
if(value == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});

Bootstrap btn-group-toggle change another group based on value

I have two bootstrap button-group-toggle. Both options could be off, but only one could be on. If option1 is on, option2 should be off. If option2 is on, option1 should be off. Is it possible to do this?
HTML:
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
<label class="btn btn-secondary" id="option1_on">
<input type="radio" name="options_option1" value="on"> On
</label>
<label class="btn btn-secondary" id="option1_off">
<input type="radio" name="options_option1" value="off"> Off
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
<label class="btn btn-secondary" id="option2_on">
<input type="radio" name="options_option2" value="on"> On
</label>
<label class="btn btn-secondary" id="option2_off">
<input type="radio" name="options_option2" value="off"> Off
</label>
</div>
This is what I tried with javascript:
$(function() {
$("#option1 input:radio").change(function() {
var optionValue = $(this).val();
if (optionValue == 'on'){
//Option2 must be off
$("#option2_off").button('toggle');
}
});
$("#option2 input:radio").change(function() {
var optionValue = $(this).val();
if (optionValue == 'on'){
//Option1 must be off
$("#option1_on").button('dispose');
}
});
});
This does not work correctly.
Edit1
The answer does not work visualy on bootstrap 4 DEMO

You could select siblings of clicked element and find input with value off and set its checked value with jquery. It will also work for more then 2 groups DEMO
$(".btn-group-toggle input:radio").on('change', function() {
let val = $(this).val();
if (val == 'on') {
var sibling = $(this)
.parents('.btn-group-toggle')
.siblings()
.find('input[value="off"]')
.prop('checked', true)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
<label class="btn btn-secondary" id="option1_on">
<input type="radio" name="options_option1" value="on"> On
</label>
<label class="btn btn-secondary" id="option1_off">
<input type="radio" name="options_option1" value="off"> Off
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
<label class="btn btn-secondary" id="option2_on">
<input type="radio" name="options_option2" value="on"> On
</label>
<label class="btn btn-secondary" id="option2_off">
<input type="radio" name="options_option2" value="off"> Off
</label>
</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