I want to disable other checkbox when current checkbox is checked or selected.
Following is my code. I have tried but not work
HTML
<input type="checkbox" name="test" id="test" class="test">One
<input type="checkbox" name="test" id="test" class="test">Two
<input type="checkbox" name="test" id="test" class="test">Three
<input type="checkbox" name="test" id="test" class="test">Four
<input type="checkbox" name="test" id="test" class="test">Five
JQuery Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".test").each(function(){
if($(this).is(':checked')){
$(this).prop('checked',true);
$('.test').prop('checked',false);
}
})
})
</script>
You can make use of change event handler and read :checked value of the checkbox clicked. Disable or enable other checkboxes as per :checked value
See below code
NOTE: Always use unique ids for all HTML elements otherwise you will end up with wrong result for the jquery script with id selectors
$(document).ready(function(){
$(".test").on('change', function(){
$('.test').not(this).prop('disabled', $(this).is(':checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="test" id="test1" class="test">One
<input type="checkbox" name="test" id="test2" class="test">Two
<input type="checkbox" name="test" id="test3" class="test">Three
<input type="checkbox" name="test" id="test4" class="test">Four
<input type="checkbox" name="test" id="test5" class="test">Five
First you need to use click or change event, then you don't need to use $(this).prop('checked',true); and do not use duplicate id
$('.test').click(function() {
let $this = $(this);
if ($this.is(':checked')) {
$('.test').not($this).attr('disabled', true)
} else {
$('.test').attr('disabled', false)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="test" class="test">One</label>
<label><input type="checkbox" name="test" class="test">Two</label>
<label><input type="checkbox" name="test" class="test">Three</label>
<label><input type="checkbox" name="test" class="test">Four</label>
<label><input type="checkbox" name="test" class="test">Five</label>
For make disable you need to use 'disabled', true.
Related
I am trying to get the radio button that originally had checked against it by default and reset the value of it.
In the example below the value is already set to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="0" checked>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
I am using this to select the empty value, but how can I set it to empty first before selecting it?
$('input[name="test"][value=""]').prop('checked', true);
Select the checked input using $('input[name="test"][checked]') and update its value with .val("")
const checkedInput = $('input[name="test"][checked]');
checkedInput.val("");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="0" checked>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
You can make an .each on inputs and check if value is empty example:
$('input[name="test"]').each(function() {
if($(this).val() === '') {
//do something
}
});
I have 2 radio buttons and would like to disable checkboxes in an array if radio button is clicked. Here is some code from a previous post in .net.
I use ASP classic and would appreciate assistance in altering this code or code that would best accomplish my goal.
<input type="radio" name="group" value="value1">
<input type="radio" name="group" value="value2">
This is the checkbox that is in the loop for the array:
<input type="checkbox" name="items" value="<%=Rs("item") %>">
$(document).ready(function () {
$('#<%= rbRadioButton.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
alert($(this).val());
});
});
How about using the .prop() method.
// Disable checkbox
$("input[value='value1']").change(function() {
$("input[name='items']").prop('disabled', true);
});
// Enable checkbox
$("input[value='value2']").change(function() {
$("input[name='items']").prop('disabled', false);
});
// Trigger reset button click
$("#btnReset").on("click", function() {
$("input[name='group']").prop('checked', false);
$("input[name='items']").prop('checked', false);
$("input[name='items']").prop('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<fieldset>
<legend>radio:</legend>
<input type="radio" name="group" value="value1">disabled
<input type="radio" name="group" value="value2">enabled
</fieldset>
<fieldset>
<legend>checkbox:</legend>
<input type="checkbox" name="items" value="1">
<input type="checkbox" name="items" value="2">
<input type="checkbox" name="items" value="3">
<input type="checkbox" name="items" value="4">
<input type="checkbox" name="items" value="5">
</fieldset>
<input type="button" value="Reset" id="btnReset">
The js script below correctly disables the remaining two checkboxes when I select the large checkbox and re-enables when unchecked. However, with this logic, I'd need to code for each specific case.
Instead of manually labeling each checked box with specific id's and coding disabling logic for each case, is there a way to programmatically disable the checked boxes that were not checked?
html
<div class="checkbox" id="sizes">
<label><input id="a" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>
js
$(document).ready(function(){
$('input[id=a]').change(function(){
if($(this).is(':checked')){
$('input[id=a]').attr('disabled',false);
$('input[id=b]').attr('disabled',true);
$('input[id=c]').attr('disabled',true);
}else{
$('input[id=a]').attr('disabled',false);
$('input[id=b]').attr('disabled',false);
$('input[id=c]').attr('disabled',false);
}
});
})
You can disable all the checkboxes inside the div sizes except the current one as below:
HTML:
<div class="checkbox" id="sizes">
<label><input id="a" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>
JQUERY:
$(document).ready(function(){
$('#sizes input[type=checkbox]').change(function(){
if($(this).is(':checked')){
$("#sizes").find(':checkbox').not($(this)).attr('disabled',true);
}
else{
$("#sizes").find(':checkbox').attr('disabled',false);
}
});
});
jsfiddle Demo
I think this can be useful
$(document).ready(function(){
$('.checkbox input[type=checkbox]').change(function(){
$('input[id=a]').attr('disabled',true);
$('input[id=b]').attr('disabled',true);
$('input[id=c]').attr('disabled',true);
if($(this).is(':checked')){
$('input[id='+this.id+']').attr('disabled',false);
}
else
{
$('input[id=a]').attr('disabled',false);
$('input[id=b]').attr('disabled',false);
$('input[id=c]').attr('disabled',false);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox" id="sizes">
<label><input id="a" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>
HTML
<div class="checkbox" id="sizes">
<label><input id="a" class="checkbox1" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" class="checkbox1" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" class="checkbox1" type="checkbox" name="small"value="1">Small</label>
</div>
jQuery
$(document).ready(function(){
$('.checkbox1').change(function(){
if($(this).is(":checked")){
$('.checkbox1').attr('disabled','disabled');
$(this).removeAttr('disabled');
}else{
$('.checkbox1').removeAttr('disabled');;
}
});
})
I have a group of checkboxes as -
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.
I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.
$("#check_1").change(function() {
alert('Checkbox One is clicked');
});
How do I do this as I have no access to modify the html ?
You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,
$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
alert('Checkbox One is clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Looks like your only criteria is the text of the label so you could target the input based on that label like :
$('label:contains("One")').prev('input:checkbox').change(function(){
console.log('One changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Hope this helps.
Please help me how to identify if a checkbox with specific id is checked/unchecked.
<input name="A" id="test" type="checkbox" value="A" />
<input name="B" id="test" type="checkbox" value="B" />
<input name="C" id="test1" type="checkbox" value="C" />
<input name="C" id="test1" type="checkbox" value="D" />
If i check the checkbox with id="test" and name="a", then the event should fire and otherwise it should not for rest of the checkbox with different id other than "test"
Please help
Since you tag JQuery you can find it helpful
AAA <input type="checkbox" id="test" />
BBB <input type="checkbox" id="test1" />
CCC <input type="checkbox" id="test2" />
and
$( "input" ).on( "click", function() {
// for a specific one, but you can add a foreach cycle if you need more
if($('#test').is(":checked")){
alert('is checked!');
}else {
alert('is NOT checked!');
}
});
Element IDs in a given document must be unique! Hence, change your HTML to something like below and take a look at the script.
$(function() {
$(":checkbox").on("change", function() {
//When the id is test1
//And name is A
//And it's checked
if (this.id === "test1" && this["name"] === "A" && this.checked) {
alert ("Checkbox with name A and ID test1 is checked");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" id="test1" type="checkbox" value="A" />
<input name="B" id="test2" type="checkbox" value="B" />
<input name="C" id="test3" type="checkbox" value="C" />
<input name="C" id="test4" type="checkbox" value="D" />
Id's must be Unique.... otherwise when you use document.getElementById();
It will select First occurence of specific Id...
Instead implement like this..
<input name="A" type="checkbox" value="A" />
<input name="B" type="checkbox" value="B" />
<input name="C" type="checkbox" value="C" />
<input name="C" type="checkbox" value="D" />
and trigger a event on click oncheck box and use document.getElementsByName('');