How to Make Only One Radio Button Selectable in Html
JQuery Radio button
Radio buttons are used where mutually exclusive options are given to user to select. The returned value will be displayed inside one div tag ( id=d1) Based on the stored value of the record we will have one of the two radio button selected. Here once the user click one radio button, we need to know two variables. One is the record number and second is out of two which radio button is clicked ( True of False ) Here we will keep record number as name of the radio button ( for both radio buttons of each record ) and one radio button with value as True and other one value as False. As mentioned in above code we can read the value , similarly here is the code to read the name of the radio button which is clicked. If programming is slected by user then options of graphics design will be disabled.
class= 'form-check form-check-inline' can be used for showing horizontally ( in one line ) using Bootstrap 4 design.
<div class='form-check form-check-inline'> <label> <input type='radio' name='r1' id='r1' value='option1' checked>Option 1</label> </div> <div class='form-check form-check-inline'> <label> <input type='radio' name='r1' id='r2' value='option2' > Option 2</label> </div> <div class='form-check form-check-inline'> <label> <input type='radio' name='r1' id='r3' value='option3' > Option 3</label> </div>
Video Tutorial on JQuery Radio Button
Reading the default or selected radio button value on page load.
When no event is occurred we can read the selected radio button value like this. ( f1 is the id of the form)
DEMO: Reading selected radio button value after page load <script> var radio_selected = $('input[name=options]:checked', '#f1').val() </script>
Here we are displaying selected radio button value inside one div layer. Getting selected radio button value using NAME
We can read the user selected radio button value by using this
in Jquery
When event is not associated with radio buttons ( group of radio button with name=r1 ) , the value of selected radio button is here. $(this).val()
Above code will return the value associated with the selected radio button. $("input[name=r1]:checked").val()
Radio button with click event
We will use one click event so any radio button is clicked by the user this part of the code will be triggered.
DEMO: Reading the selected value of the Period button <script> $(document).ready(function() { $("input:radio[name=options]").click(function() { $("#d1").css("background-color", "yellow"); // color of the background $('#d1').html($(this).val()); }) }) </script>
Event of Any radio button of page
Irrespective of id, name, class associated if any radio button on page is clicked or changed then this event will be executed.
$("input[type='radio']").change(function() { // Your code for any radio button change event })
Getting radio button name
Sometime we are collecting records from database table and wants to give options to user to change one filed from True to False or vice versa
$(this).attr('name')
Collecting custom data attribute
If there are several radio buttons on page with different class, id, value and name, we can get details of clicked radio button along with attributes for our processing. Here we have used one additional custom attribute ( allowed in HTML5 , name should start with string 'data-' )
<input type='radio' name='my_name' class=r2 id=my_id data-group_type='group-1' value='1'>FAST
HTML5 data-* $("input[type='radio']").change(function() { $(this).attr('name') // get name $(this).attr('class') // get Class $(this).attr('id') // id $(this).attr('data-group_type') // additional custom data attribute })
We can use additional data attributes as per the format given in HTML5.
We can read the value of data attributes like this. <input type='radio' name='options' id='opt1' value='option1' data-name='my_option' data-group=first data-type=sel1 >
DEMO: Additional Attributes of radio buttons $(this).data('group')
Resetting radio buttons
Once the selection is done by the user we can reset the same selection ( no selection ), here is the code.
DEMO: Resetting radio buttons $("input:radio[name=options]").prop('checked', false);
Check or Uncheck radio button
Using id of the radio button we can select or de-select the radio button.
Uncheck $("#radio-1").prop("checked", true); // JQuery verison >= 1.6 $("#radio-1").attr("checked", "checked"); // JQuery verison < 1.6
DEMO: Select radio button using Button Click $("#radio-1").prop("checked", false); // JQuery verison >= 1.6
Enable or disable all Radio buttons
By click event of a button we can enable or disable the group of radio buttons.
DEMO: Enable or Disable Radio buttons $("input:radio[name=options]").attr("disabled",true);
Enable or disable single Radio buttons
DEMO: Enable or Disable single Radio buttons $("#opt1").attr("disabled",true);
Disabling two radio buttons
Using above concepts we can enable or disable based on the selection of the user. Let us say user has to select one of the two options, programming or graphics design. Based on the selection or choice of the user we will enable or disable two matching options out of four given options. $("#opt1,#opt2").attr("disabled",true);
Assigning Boolean value ( True or False ) by using value of radio button
Directly we can't use radio button value to set any status to true of false as it is in the form of string. We can the set value of a variable to Boolean value ( true ) like the code below and then use the variable set any object to true . Here is to code to set the collapsible option of Jquery UI tab .
DEMO: Disable & Enable set of radiob buttons based on user selection $("input:radio[name=r1]").click(function() { var sel = ($(this).val() == 'true'); $( "#my_tabs" ).tabs( "option", "collapsible", sel ); })
Checkboxradio JQuery UI
We can enhance these buttons by adding effects , user interactions and styles by using Checkboxradio UI.
Radio & checkbox to themeable buttons with hover & active style JQuery UI Managing OPTGROUP attributes
We can make a group of options of a dropdown listbox by using click event of a radio button. Options are grouped under <OPTGROUP> tag.
Script of Video tutorial
DEMO of managing OPTGROUP disabled option. Textbox Managing Buttons ListBox <html> <head> <title>(Type a title for your page here)</title> <META NAME="DESCRIPTION" CONTENT=" "> <META NAME="KEYWORDS" CONTENT=" "> </head> <body> <input type='radio' name='options' id='opt1' value='option1'> Option1 <input type='radio' name='options' id='opt2' value='option2'> Option2 <input type='radio' name='options' id='opt3' value='option3'> Option3 <input type='radio' name='options' id='opt4' value='option4'> Option4 <br><span id=display></span> <br> <button id=b1>Disble</button> <button id=b2>Enable</button> <button id=b3>Disable All</button> <button id=b4>Enable All</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { // Jquery code here /// $('input[type=radio]').change(function(){ var data=$(this).data('group'); $('#display').html(data) }); //// $('#b1').click(function(){ $('#opt1,#opt2').attr('disabled',true); }); $('#b2').click(function(){ $('#opt1,#opt2').attr('disabled',false); }); $('#b3').click(function(){ $('input:radio[name=options]').attr('disabled',true); }); $('#b4').click(function(){ $('input:radio[name=options]').attr('disabled',false); }); /// //// }); </script> </body> </html>
This article is written by plus2net.com team.
Sandra | 23-07-2016 |
Thank you very much for the demo "Disabling two radio buttons". I spend several days to find out how to add a required attribute to a textarea after a radio button has been checked. This demo helped me to finally find a working code. |
How to Make Only One Radio Button Selectable in Html
Source: https://www.plus2net.com/jquery/radio-button.php
0 Response to "How to Make Only One Radio Button Selectable in Html"
Post a Comment