<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>
<script>
var radio_selected = $('input[name=options]:checked', '#f1').val()
</script>
DEMO: Reading selected radio button value after page load
this
in Jquery
$(this).val()
When event is not associated with radio buttons ( group of radio button with name=r1 ) , the value of selected radio button is here.
$("input[name=r1]:checked").val()
Above code will return the value associated with the selected radio 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>
DEMO: Reading the selected value of the Period button
$("input:radio[name=enq_status]").click(function(){
my_str='enq_status='+$(this).val() // collect the value of selected radio button
window.location = "list.php?"+my_str; // reload or redirect the page wth value
});
PHP script to manage Radio button click event to submit data
$("input[type='radio']").change(function() {
// Your code for any radio button change event
})
$(this).attr('name')
<input type='radio' name='my_name' class=r2 id=my_id
data-group_type='group-1' value='1'>FAST
$("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
})
HTML5 data-* <input type='radio' name='options' id='opt1' value='option1'
data-name='my_option' data-group=first data-type=sel1 >
We can read the value of data attributes like this.
$(this).data('group')
DEMO: Additional Attributes of radio buttons
$("input:radio[name=options]").prop('checked', false);
DEMO: Resetting radio buttons
$("#radio-1").prop("checked", true); // JQuery verison >= 1.6
$("#radio-1").attr("checked", "checked"); // JQuery verison < 1.6
Uncheck
$("#radio-1").prop("checked", false); // JQuery verison >= 1.6
DEMO: Select radio button using Button Click
$("input:radio[name=options]").attr("disabled",true);
DEMO: Enable or Disable Radio buttons
$("#opt1").attr("disabled",true);
DEMO: Enable or Disable single Radio buttons
$("#opt1,#opt2").attr("disabled",true);
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.
$("input:radio[name=r1]").click(function() {
var sel = ($(this).val() == 'true');
$( "#my_tabs" ).tabs( "option", "collapsible", sel );
})
DEMO: Disable & Enable set of radiob buttons based on user selection
<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>
DEMO of managing OPTGROUP disabled option.
Textbox
Managing Buttons
ListBox
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. |
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |