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">
Related
I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>
You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.
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.
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.
I try to get value of radio button onclick or onchange event. But it only work for first item not for other item. When I click on first radio button it alert the radio button value. But when I click on other radion button it don't alert nothing.
My code is here
HTML
<input type="radio" value="1" name="layout" id="layout" class="ace">1
<input type="radio" value="2" name="layout" id="layout" class="ace">2
<input type="radio" value="3" name="layout" id="layout" class="ace">3
<input type="radio" value="4" name="layout" id="layout" class="ace">4
jQuery
$('#layout').on("click", function(e){
alert($(this).val());
});
Try avoiding duplicate id's(Id should be unique on a page), instead use name attribute as shown below :-
$('input[name="layout"]').on("click", function(e){
alert($(this).val());
});
id attribute must be unique on the page. you always get the value of the first element with that id...
ID attribute should be unique on the page. You need to use class instead:
HTML:
<input type="radio" value="1" name="layout" class="layout ace">1
<input type="radio" value="2" name="layout" class="layout ace">2
<input type="radio" value="3" name="layout" class="layout ace">3
<input type="radio" value="4" name="layout" class="layout ace">4
jQuery:
$('.layout').on("click", function(e){
alert($(this).val());
});
From MDN:
The ID must be unique in a document, and is often used to retrieve the
element using getElementById.
<script>
function first()
{
var a = document.getElementById("opt1").value;
alert(a);
}
function second()
{
var b=document.getElementById("opt2").value;
alert(b);
}
function third()
{
var c=document.getElementById("opt3").value;
alert(c);
}
function fourth()
{
var d=document.getElementById("opt4").value;
alert(d);
}
</script>
<input type="radio" value="1" name="layout" id="opt1" class="layout ace" onclick="first()">1
<input type="radio" value="2" name="layout" id="opt2" class="layout ace" onclick="second()">2
<input type="radio" value="3" name="layout" id="opt3" class="layout ace" onclick="third()">3
<input type="radio" value="4" name="layout" id="opt4" class="layout ace" onclick="fourth()">4
I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?
There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson
Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.
You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.