This question already has answers here:
Limit Checkbox amount
(6 answers)
Closed 5 years ago.
Let's say I have 10 check-boxes on the page. I'm looking for something very specific with the behaviour :
A variable let's say maxSelections can be used to control the max-selectable checkboxes
After maxSelections is reached, the other checkboxes on the page should be disabled
At this time, those already checked should not be disabled as user has to have the option of unchecking something from here to select the other available checkbox
ps I've refered this JSFiddle but cant get the point-2 to be working
Thanks in advance for help
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
We can use pseudo classes to get the state of the check boxes
:checked : Selects all checkboxes currently checked
:not(:checked) : Selects all checkboxes currently not checked
Once we have these two states available, we can use the following jQuery syntax to set the disabled attribute of the checkbox
$(<checkboxElememt>).prop('disabled', <true/false>);
Here's a snippet that answers what you need :
var maxSelections = 3
$('input[type="checkbox"]').change(function() {
var currentCount = $('input[type="checkbox"]:checked').length // Here we can get the number of checkboxs checked
// :checked pseudo selects all teh checkboxes that are checked
if (currentCount >= maxSelections) {
$('input[type="checkbox"]:not(:checked)').prop('disabled', true); // :not(:checked) pseudo is used to select and disable all unchecked checkbox
} else {
$('input[type="checkbox"]').prop('disabled', false); // Else, let's enable all the checkboxes
}
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div>
<input type="checkbox" name="op1" id="op1" />
<label for="op1">Option 1</label>
</div>
<div>
<input type="checkbox" name="op2" id="op2" />
<label for="op2">Option 2</label>
</div>
<div>
<input type="checkbox" name="op3" id="op3" />
<label for="op3">Option 3</label>
</div>
<div>
<input type="checkbox" name="op4" id="op4" />
<label for="op4">Option 4</label>
</div>
<div>
<input type="checkbox" name="op5" id="op5" />
<label for="op5">Option 5</label>
</div>
<div>
<input type="checkbox" name="op6" id="op6" />
<label for="op6">Option 6</label>
</div>
Related
I want to be able to perform the functionality in the picture above. It wont work however.
$("#customSwitches").click(function() {
var $this = $(this);
if ($this.data('clicked')) {
alert("not element clicked");
$this.data('clicked', false);
$(document).on('click', "#radio1, #radio2, #radio3, #radio4").not(this).prop('checked', false);
});
} else {
alert("element clicked");
$this.data('clicked', true);
}
});
In each click of the check box from the groups, you can checked the checked property of #customSwitches. If it is not checked then you can count the length of checked check boxes from the group, if it is more than 1 then you can prevent the default event.
When clicking #customSwitches you can reset all the check boxes from the group.
You can try the following way:
$(".vehicle").click(function(e){
if($('#customSwitches').is(':not(:checked)')){
if($('.vehicle:checked').length > 1){
alert('You can not check multiple');
e.preventDefault();
}
}
});
$("#customSwitches").click(function(e){
$(".vehicle").prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="customSwitches"> Select Multiple</label><input type="checkbox" id="customSwitches">
<hr/>
<input class="vehicle" type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input class="vehicle" type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input class="vehicle" type="checkbox" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
Your current code has some syntax issues and uses nested event handlers, which is not a good design pattern.
In basic terms you are trying to build a dynamic checkbox limiter based on the first checkbox state. To do that simply determine if the first box is checked, and then count the number of checked regions to see if it exceeds the limit. If so, disallow the current box to be checked. Try this:
let $allowMulti = $('#allow_multi').on('change', function() {
if (!this.checked)
$('.region').prop('checked', false); // remove all checks if no multi allowed
});
$('.region').on('change', function() {
let selectedCount = $('.region:checked').length;
if (!$allowMulti.prop('checked') && selectedCount > 1)
$(this).prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<label>
<input type="checkbox" id="allow_multi">
Select multiple regions
</label>
</p>
<label>
<input type="checkbox" class="region" value="1"> 1
</label>
<label>
<input type="checkbox" class="region" value="2"> 2
</label>
<label>
<input type="checkbox" class="region" value="3"> 3
</label>
<label>
<input type="checkbox" class="region" value="4"> 4
</label>
This question already has answers here:
Check if a radio button is checked jquery [duplicate]
(5 answers)
Closed 3 years ago.
I have placed radio button inside foreach loop based on records radio button will be shown with options yes or no ,so lets say two records so number of radio buttons with options yes or no will be 4
for record1 then rule no 1 from table //
<input type="radio" id="1" class="terms_"/>Yes
<input type="radio" id="2" class="terms_"/>No
for record 2 then rule no 2 from table//
<input type="radio" id="3" class="terms_"/>Yes
<input type="radio" id="4" class="terms_"/>No
<input type="submit" class="validate" value="Submit"/>
so what if I don't select any option yes or no from rule 1 then show alert select (yes /no), again if I don't select any option for rule alert should come please select (yes/no) from rule 2,but in my code I am getting 4 times alert but I want two alerts to show because options are two only.
$(".validate").click(function() {
$('.terms_').each(function() {
if (!$(".terms_:checked").val()) {
alert('Oops,Please select yes or no.');
}
});
});
You can add name attribute to the radio buttons to make group for them, then check the length to show the message:
$(".validate").click(function(){
var len = $('[name=rule1]:checked, [name=rule2]:checked').length;
if (len <= 1) {
alert('Oops,Please select yes or no.');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<label>Rule 1</label>
<input type="radio" id="1" name="rule1" class="terms_"/>Yes
<input type="radio" id="2" name="rule1" class="terms_"/>No
</div>
<div>
<label>Rule 2</label>
<input type="radio" id="3" name="rule2" class="terms_"/>Yes
<input type="radio" id="4" name="rule2" class="terms_"/>No
</div>
<input type="submit" class="validate" value="Submit"/>
</form>
I have 2 DIV sections and both have checkbox in it. The structure is mentioned below:
<div id="main DIV">
<div id="firstDIV">
<input type="checkbox" checked/>1
<input type="checkbox" checked/>2
<input type="checkbox" checked/>3<br/>
<input type="checkbox" checked/>4
<input type="checkbox" checked/>5
</div>
<div id="secondDIV">
<input type="checkbox" checked/>1
<input type="checkbox" checked/>2
<input type="checkbox" checked/>3<br/>
<input type="checkbox" checked/>4
<input type="checkbox" checked/>5
</div>
From firstDiv a user can select Maximum number of checkbox but from secondDiv user can select maximum 10 checkbox. But the total number of selected checkbox ( firstDiv + secondDiv) should not be more than 12. As soon as user select 12th checkbox then remaining unchecked checkbox will get disabled from both DIVs.
Note: The main thing is that each time during check/uncheck when counter of Checkboxes that are checked is 11 then all checkbox will be active. Only when counter is equals to 12 then the only unchecked checboxes will get disabled.
My below code is working only for a Single DIV element but how can I implement it on combination of 2 DIVs.
var $checkboxes = $('#firstDiv input[type=checkbox]');
$checkboxes.on('change', function() {
if ($checkboxes.filter(":checked").length >= 12) {
$checkboxes.filter(":not(:checked)").prop("disabled", true);
} else {
$checkboxes.prop("disabled", false);
}
});
This question already has answers here:
How can I know which radio button is selected via jQuery?
(40 answers)
Closed 7 years ago.
I have two radio buttons with the same name but different values. I have to check before I submit my form that value selected id correct otherwise give message to user.
Here is my HTML code:
<td>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label><br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
</td>
Here is my JQuery that i tried to use:
var directed = $('input[name=directed]').each(function(){
alert($(this).val())
});
This code gave me all values for elements with the same name, I just need selected value. After that I have to check if that value is valid before submitting the form. If anyone know how to get just selected value please let me know. Thanks.
You can just use the :checked selector and val(): like this:
var directed = $('input[name=directed]:checked').val();
$('button').click(function() {
var directed = $('input[name=directed]:checked').val();
alert(directed);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label>
<br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
<br /><br />
<button>Get value</button>
Suppose I have four check-boxes in a form Check-a,Check-b,Check-c,Check-d.
Check-a and Check-b are already selected.I can get which check-box is checked or not unchecked by using Jquery.
Now I have unchecked Check-a. So Check-a were checked and I had made this unchecked from checked. So now Check-c and Check-d were already unchecked and Check-a is unchecked by me.I am in search of a way to track which are unchecked from checked and which were previously unchecked.
Can Anyone Tell me a way ?
Assuming the same HTML as #definitelyundefinable, this does kind of the same thing but it's slightly cleaner because it doesn't use hidden fields, and fake arrays (as strings in the hidden field)
$(function() {
var history = [];
$("input").click(function() {
history.push({
id: this.id,
checked: this.checked
});
});
// If you'd like, you can initialize the array
// with the initial values with the following line
$("input").click();
});
if you need a kind of click-history, why not just use an extra field?
html:
<form>
<div>
<input type="checkbox" name="fruit" value="o" id="orange" />
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="a" id="apple" />
<label for="apple">apple</label>
</div>
<div>
<input type="text" name="history" id="history" />
</div>
</form>
jquery script:
$("input").click(function() {
$("#history").val( $("#history").val() + $(this).val() + ";");
});
you can make it hidden and evaluate the ; separated list afterwards..