ZaZaKi, a web developer Between Manchester UK & Rotterdam NL. © 2015-2024.

jQuery Radio button enable input


<!DOCTYPE html>

<html>
<head>
<title>Title of the document</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {

$('form input:radio').click(function(){

// set all input to disabled but not radio input
$("form input").not("input[type=radio]").prop('disabled', true);

// set input to able only in this parent
$(this).siblings('input').prop('disabled', false);



// sets all radio check on unchecked
$("input[type=radio]").prop("checked", false);

// checks only this radio that clicked on it.
$(this).prop("checked", true);

});

});
</script>
</head>

<body>
<form>
<p><!-- -->
<input type='radio'> <input disabled type="text"></p>

<p><!-- -->
<input type='radio'> <input disabled type="text"></p>

<p><!-- -->
<input type='radio'> <input disabled type="text"></p>

<p><!-- -->
<input type='radio'> <input disabled type="text"></p>

<p><!-- -->
<input type='radio'> <input disabled type="text"></p>

<p><!-- -->
<input type='radio'> <input disabled type="text"></p>

<p><!-- -->
<input type='radio'> <input disabled type="text"></p>
</form>
</body>
</html>