I had a form with many input groups, and all are hidden except the first group which is active. The submit button is actually next group and is it should be in any group disabled. My problem is that after the first group inputs has been checked the submit button (nextbutton) stays active which is not ok. Can anyone help?
<html>
<p>Button should be enabled if at least one checkbox is checked</p>
<div class="grp1">
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
</div>
<h1>group 2 is hidden and will be display after group 1 input is checked and
button should be enabled if at least one check_box is checked</h1>
<div class="grp2 " style="display:none;">
<div>
<input type="check_box" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
</div>
<p>the submit button only appears if a group has a class=hasSubmit. and disabled only if a checkbox checked</p>
<p>the problem is, after grp1 is checked and next to grp2 the submit button is undisabled</p>
<input class="nextButton" type="submit" value="Do thing" disabled>
</div>
</html>
This is the code
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
Here is what I understood from your question:-
By default only one group is visible and the button is disabled.
When any checkbox of group 1 is checked the button should be enabled.
On clicking the button group 2 becomes visible and the button is
again disabled.
If all the checkbox of any visible group is un-checked the button
should again be disabled.
Based on this what you need to do is to disable the button when it is clicked after enabling the next section.
$('input:checkbox').change(function () {
var doEnableButton = true;
$('div.hasSubmit:visible').each(function () {
if ($(this).find('input:checked').length === 0) {
doEnableButton = false;
return false; //break
}
});
if (doEnableButton) {
$('.nextButton').prop('disabled', false);
} else {
$('.nextButton').prop('disabled', true);
}
});
$('.nextButton').click(function (e) {
e.preventDefault();
if ($('.hasSubmit:hidden').length > 0) {
$('.hasSubmit:hidden:first').show();
$('.nextButton').prop('disabled', true);
} else {
//Submit the page
alert('Page submitted');
}
});
For demonstration purpose I've moved the heading (h1) inside the div.hasSubmit. Also I've added three sections (that is 3 div.hasSubmit) in the following jsFiddle: here
First, correct your html layout and put your submit button inside of each group wrapper, which in your case is the element with class name hasSubmit.
Then find it on checkbox click event by traversing its parent container like so:
var checkboxes = $("input[type='checkbox']");
checkboxes.on("click", function () {
// read it when checkbox click event is fired, instead of on page load
var submitButt = $(this)
.closest(".hasSubmit")
.find("input[type='submit']");
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
FIDDLE
Related
I'm making a multi level radio buttons. The logic hides/shows the second level radio buttons, then select/check the first element input that shows based on the selected first level radio buttons. But for some reason when I select a second level radio button and I select another button in the first level radio buttons when I go back to the previous selected radio button. There is an error that the value is null. I'm kind of confused because in html it is already selected, but in UI it wasn't.
The process where I noticed the bug: Select A2 -> Select B3 -> Select A3 -> Select A2
Here's my code:
(https://jsfiddle.net/jakedsi/0yhnujez/)
This can be simplified.
It is not simple due to your HTML, but I simplified the labels too
https://jsfiddle.net/mplungjan/dc9xyhLj/
const filterForm = document.querySelector('form.fltr');
filterForm.addEventListener('click', (e) => {
const tgt = e.target;
if (!tgt.matches('[type=radio]')) return;
const parent = tgt.closest('div');
parent.querySelectorAll('input')
.forEach(rad => rad.closest('label').classList.toggle('checked', rad.checked));
if (!parent.matches('.ggrp')) return; // not a ggrp
document.querySelectorAll('.dgrp div').forEach(div => {
div.hidden = !div.matches(`.${tgt.id}`);
if (!div.hidden) div.querySelector('input').click();
});
});
.fltr label.checked {
border-color: #44D62C;
color: #44D62C;
}
<form class="fltr">
<fieldset>
<legend>Graphics</legend>
<div style="display: flex;" class="ggrp">
<label class="checked"><input id="A1" name="gfx" type="radio" value="A1" checked /> A1</label>
<label><input id="A2" name="gfx" type="radio" value="A2" /> A2</label>
<label><input id="A3" name="gfx" type="radio" value="A3" /> A3</label>
</div>
</fieldset>
<fieldset>
<legend>Display</legend>
<div style="display: flex;" class="dgrp">
<div class="A1"><label class="checked"><input id="B1" name="dsp" type="radio" value="B1" checked /> B1</label> </div>
<div class="A1 A2"><label><input id="B2" name="dsp" type="radio" value="B2" /> B2</label> </div>
<div class="A2"><label><input id="B3" name="dsp" type="radio" value="B3" /> B3</label> </div>
<div class="A3"><label><input id="B4" name="dsp" type="radio" value="B4" /> B4</label></div>
</div>
</fieldset>
</form>
There are two radio buttons separately. Have different name values. I'm trying to add a css to the div element when both are "checked".
$(document).ready(function(){
$('input[name="nameone"]').click(function(){
if($(this).is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
Just add a second if condition like you do for the input[name="nameone"]:
function showDiv() {
if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
$(".calculate-total").css("display", "block")
}
}
$(document).ready(function() {
$('input[name="nameone"], input[name="nametwo"]').click(function() {
showDiv();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
Just check if both of them are checked:
$(document).ready(function(){
$('input[name="nameone"], input[name="nametwo"]').click(function(){
if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
You are only checking if the first radio input is clicked (checked), that's why you the div is showing when you click on the first radio input. You should listen/check for both. If both are clicked (checked). Then that's when you want to do something. You can use the && to get the job done
function showDiv() {
if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
$(".calculate-total").css("display", "block")
}
}
$(document).ready(function() {
$('input[name="nameone"], input[name="nametwo"]').click(function() {
showDiv();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
You have to check if all radio buttons are checked and based on this check you can toggle the visibility of the block.
I added a class to the radiobuttons you want to check. And only if the length of all radiobuttons is equal to the checked onces i show the calculate-total div
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
if ($('.check-it').filter(':checked').length === $('.check-it').length) {
$(".calculate-total").css("display", "block")
} else {
$(".calculate-total").css("display", "none")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" class="check-it" /> Nameone radio
</label>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" class="check-it" /> Namtwo radio
</label>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
You need to listen for both radio buttons and check for both each time:
$(document).ready(function(){
$('input:radio').change(function(){
if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
I have a group of check boxes that are all part of one array. What I require is that if the first one is selected (I don't mind), then any of the others are unselected, and vice versa - if one of the bottom three options are selected, then I don't mind needs to be unselected.
The last three options can all be selected at the same time.
This Link is similar to what I am asking to do. Any help would be appreciated
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
The code is exactly the same as the link you provided.
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
And then:
// We cache all the inputs except `#field_1071_0` with `:not` pseudo-class
var $target = $('input:not(#field_1071_0)');
$('#field_1071_0').on('change', function () {
// if 'i don't mind' is selected.
if (this.checked) {
// remove the 'checked' attribute from the rest checkbox inputs.
$target.prop('checked', false);
}
});
$target.on('change', function () {
// if one of the bottom three options are selected
if (this.checked) {
// then I don't mind needs to be unselected
$('#field_1071_0').prop('checked', false);
}
});
Demo: https://jsfiddle.net/426qLkrn/4/
I cannot remember an in-house feature of JavaScript or jQuery that makes it possible to solve your problem. So, you have to solve it by your own.
You can add a data attribute to your checkboxes where you list all the checkboxes (as an id) which cannot be selected at the same time with the current checkbox, e.g.:
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind" data-exclude="['field_1072_1','field_1072_2','field_1072_3']" />
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter" data-exclude="['field_1071_0']" />
...
Then, you add, for example, an onchange event to each of the checkboxes. This event checks whether the checkbox has changed to checked or to unchecked. If it has changed to checked, you have to uncheck all checkboxes within the list:
document.getElementById("field_1071_0").onchange= function(e) {
if (this.checked) {
this.dataset.exclude.forEach(function (exc) {
document.getElementById(exc).checked = false;
});
}
};
Or, with jQuery:
$("#field_1071_0").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
The good thing is: You can apply this function to each checkbox you want, e.g.:
$("input:checkbox").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
Now, each checkbox has the desired behaviour. So, this solution is a general way to solve it.
Comment: If you do not have access to the HTML code, i.e., to the input fields to add some information like the data-attribute, you can add those information via jQuery/JavaScript too:
$("#field_1071_0").data("exclude", ['field_1072_1','field_1072_2','field_1072_3']);
$("#field_1072_1").data("exclude", ['field_1071_0']);
...
jquery prop method can be used to pragmatically check or unchecked a check box. is can be use to evaluate if a condition is true or false.
Hope this snippet will be useful
// if first check box is selected , then checkedremaining three
$("#field_1071_0").on('change', function() {
//$(this) is the check box with id field_1071_0
// checking if first checkbox is checked
if ($(this).is(":checked")) {
//opt2 is a common class for rest of the check boxes
// it will uncheck all other checkbox
$(".opt2").prop('checked', false)
}
})
//unchecking first checkbox when any of the rest check box is checked
$(".opt2").on('change', function() {
if ($(this).is(":checked")) {
$("#field_1071_0").prop('checked', false)
}
})
<!--Adding a class `opt2` to the last three checkboxes-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" class="opt2" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" class="opt2" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair" class="opt2">Au Pair</label>
</div>
</fieldset>
by clicking on radio buttons i need to show hide two text boxes. when i click on radio1 text box1 shows ..
i need to show text box2 on clicking radio button2 and hide the textbox1
please help me to solve with the below code
Html
<p>
KYC<input type="radio" name="radio1" value="Show">
Bank OTP<input type="radio" name="radio2" value="hide">
</p>
<div class="textd1">
<p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p>
</div>
<div class="textd2">
<p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30">/p>
</div>
js
$(document).ready(function() {
$(".textd1").hide()
$(".textd2").hide()
$('[name=radio1]').on('change', function(){
$('.textd1').toggle(this.value === 'Show');
})
$('[name=radio2]').on('change', function(){
$('.textd2').toggle(this.value === 'Show');
})
});
Keep the name of radio buttons same so it forms a group and give it a single event of click and based on the value of the radio show or hide required textbox as below:
$(document).ready(function() {
$(".textd1").hide()
$(".textd2").hide()
$('[name=radio]').on('click', function() {
if ($(this).val() == "Show") {
$('.textd1').show();
$('.textd2').hide();
} else {
$('.textd1').hide();
$('.textd2').show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
KYC
<input type="radio" name="radio" value="Show">Bank OTP
<input type="radio" name="radio" value="hide">
</p>
<div class="textd1">
<p>Textbox #1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="textd2">
<p>Textbox #2
<input type="text" name="text2" id="text2" maxlength="30">
</p>
</div>
try this way
$(document).ready(function() {
$(".textd1").hide()
$(".textd2").hide()
$('#a').on('change', function(){
$(".textd2").hide()
$('.textd1').show();
})
$('#b').on('change', function(){
$(".textd1").hide()
$('.textd2').show()
})
});
https://jsfiddle.net/d1n4rg24/1/