I was wondering if there is a way where i have i 2 groups of radio button
eg
group 1
<input type="radio" name="things" value="car" /> car
<input type="radio" name="things" value="car" />pen
<input type="radio" name="things" value="car" />TV
group2
<input type="radio" name="things" value="exam" /> exam
<input type="radio" name="things" value="journey" />journey
the question is if i select radio button from group2
Eg exam it should deactivate radio butons car And Tv from group1 and allow only pen radio button active
Modifying your HTML a bit
<div id="grp1">
<input type="radio" name="things" value="car" /> car
<input type="radio" name="things" value="pen" />pen
<input type="radio" name="things" value="tv" />TV
</div>
<div id="grp2">
<input type="radio" name="things" value="exam" /> exam
<input type="radio" name="things" value="journey" />journey
</div>
$(function(){
$("#grp2 input:radio[name='things']").change(function(){
$("#grp1 input:radio[name='things'][value!='pen']").attr("disabled", true);
});
});
See a working demo
$("input[value="exam"]").click(function() {
$("input[value=\"car\"").attr("disabled", "disabled");
});
This should disable the "car" input when the exam radio button is clicked.
Related
There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I have a multi-step form with different input types inside each <fieldset>. I have a 'next' <button> which will trigger the next section of the form once the current fieldset has been completed.
Currently the next button is set to disabled until the user has met the criteria for that fieldset - ie: checked radios/checkboxes etc.
The issue I'm having is the jQuery I'm using to switch the button attribute to .prop('disabled', false); changes all of the buttons in the entire form to false. Is it possible to target the <button> within the current fieldset only?
Additionally, is it possible to disable the next button if a user goes back to a section and unchecks all inputs?
Here's a previous answer containing the script i'm currently using: Disable button until one radio button is clicked
I have a Codepen with a prototype of what I'm working on here: https://codepen.io/abbasarezoo/pen/jZgQOV - you can assume once live each one fieldset will show at a time.
Code below:
HTML:
<form>
<fieldset>
<h2>Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button disabled>Next</button>
</fieldset>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-4" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-5" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
<fieldset>
<h2>Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-2">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button disabled>Next</button>
</fieldset>
</form>
JS:
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
Thanks in advance for any help!
i have just change your js into this .. this will help you to enable current button in the fieldset not all of them
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
I have this problem: In my form i have one list of questions and this questions have multiples answers with radio buttons that have the same name.
If i have one question, no problem, but if i have two or more questions i have a lot of radio buttons with the same name.
I have this in HTML:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
I can't change the name or the value, because i need this properties to save the answer of the user.
The user select one radio and if the user select other radio of the other question, the radio of the first question change and show only one radio selected.
You need to have a different name for the radio buttons in each question. Radio buttons with the same name can only be used as one "group." Example:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="like_answer">
<label>No</label>
<input type="radio" value="36" name="like_answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="interested_answer">
<label>No</label>
<input type="radio" value="36" name="interested_answer">
change name
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertwo">
<label>No</label>
<input type="radio" value="36" name="answertwo">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertree">
<label>No</label>
<input type="radio" value="36" name="answertree">
I have 10 radio buttons with unique name and these radio buttons are divided into two div. I mean each div have 5 radio buttons and i want to show only one div at a time with first radio button checked. what i want is visible div should have first radio button checked by default. but please note all radio buttons have unique name on a same page.
Below is my code for reference.
<style>
#secondopt, #firstopt { display: none;}
</style>
<script>
function checkme(){
if (document.getElementById("opt1").checked == true){
document.getElementById("firstopt").style.display = "block"
document.getElementById("secondopt").style.display = "none";
}
if (document.getElementById("opt2").checked == true){
document.getElementById("firstopt").style.display = "none"
document.getElementById("secondopt").style.display = "block";
}
}
</script>
<form name="form1">
<label><input type="radio" name="opt" id="opt1" onclick="checkme()" /> First opt</label>
<label><input type="radio" name="opt" id="opt2" onclick="checkme()" /> Second Opt</label>
<div id="firstopt">
<label><input type="radio" name="items" value="data1" />Item 1</label>
<label><input type="radio" name="items" value="data2" />Item 2</label>
<label><input type="radio" name="items" value="data3" />Item 3</label>
<label><input type="radio" name="items" value="data4"/>Item 4</label>
<label><input type="radio" name="items" value="data5"/>Item 5</label>
</div>
<div id="secondopt">
<label><input type="radio" name="items" value="data6"/>Item 6</label>
<label><input type="radio" name="items" value="data7"/>Item 7</label>
<label><input type="radio" name="items" value="data8"/>Item 8</label>
<label><input type="radio" name="items" value="data9"/>Item 9</label>
<label><input type="radio" name="items" value="data10"/>Item 10</label>
</div>
</form>
How to achive this?
As you have divided radio buttons in two div, you should also use group property/name of radio
buttons. Here give two different groups names and then use selected/checked property using radio button id.
do this
<form name=frmone>
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal
</form>
<script>
var len = document.frmOne.payment.length;
for (i = 0; i < len; i++) {
document.frmOne.payment[i].checked ;
break;
}
</script>
I need to have the number of 'yes's' selected from a set of radio buttons shown in a hidden field.
I have a form with several sets of radio buttons.
The first radio set:
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_1" value="1">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_2" value="2">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_3" value="3">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_4" value="4">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_5" value="5">
Subject to the value selected above (ie 1,2,3,4,5) then to calculate the radio buttons selected yes from below radio buttons. ie if selected 2 in radio button above then the first two radio button sets need to check for yes. If 4 selected the the first 4 radio sets below need to be checked for yes values.
This is the next five radio sets
<input type="radio" name="set1" id="set1_no" value="no">
<input type="radio" name="set1" id="set1_yes" value="yes">
<input type="radio" name="set2" id="set2_no" value="no">
<input type="radio" name="set2" id="set2_yes" value="yes">
<input type="radio" name="set3" id="set3_no" value="no">
<input type="radio" name="set3" id="set3_yes" value="yes">
<input type="radio" name="set4" id="set4_no" value="no">
<input type="radio" name="set4" id="set4_yes" value="yes">
<input type="radio" name="set5" id="set5_no" value="no">
<input type="radio" name="set5" id="set5_yes" value="yes">
<input type="hidden" name="number_of_yes" value="">
Thanks to the community help I have this JQuery code that calculates the number of yes's in the form and puts the number into the hidden text box 'number_of_yes' on submit.
<script type="text/javaScript">
$(document).ready(function() {
$("#yourFormsId").submit(function() {
$('input[name="number_of_yes"]').val(
$('input:checked[type="radio"][value="yes"]').length);
});
});
</script>
But, this checks for all yes's selected and I need this limited to the first, second, third, fourth or fifth radio sets (ie set1, set2, set3, set4, set5) depending on what is selected from the number_of_sets_to_count radio button (ie 1,2,3,4,5).
Thanks
Try this
$(document).ready(function() {
$("input[name=number_of_sets_to_count]").click(function(){
var radioBtns = $("input[id^='set']");
//First set all the radio buttons to No
radioBtns.filter("[value='no']").attr("checked", true);
//Now set only the required radio buttons to yes
radioBtns.filter("[value='yes']:lt("+parseInt($(this).val())+")").attr("checked", true);
});
$("#yourFormsId").submit(function() {
$('input[name="number_of_yes"]').val($('input:checked[type="radio"][value="yes"]').length);
});
});