CODEWITHSUNDEEP
javascriptphpjqueryhtml
Mario
Mario

Reputation: 123

How to enable text field when clicked based on radio button

I have one text field and other three radio buttons.

I have to add amount for donation whether a custom amount filled from text box or whether by clicking a radio buttons which have fixed values. 

<input type="radio" name="type" value = '1'>$1<br>
<input type="radio" name="type" value = '5'>$5<br>
<input type="radio" name="type" value = '10'>$10<br>
<input type = "number" id ="custom_amount">

I want to disable input field when any radio button is clicked and when I click on the text field it gets enabled.

Is it possible to do that? As i have tried using 

<input type="radio" name="type" value = '1' id = 'id_1' onclick="document.getElementById('id_1').disabled = false; document.getElementById('custom_amount').disabled = true;">$1<br>
<input type="radio" name="type" value = '5' id = 'id_5' onclick="document.getElementById('id_5').disabled = false; document.getElementById('custom_amount').disabled = true;">$5<br>
<input type="radio" name="type" value = '10' id = 'id_10' onclick="document.getElementById('id_10').disabled = false; document.getElementById('custom_amount').disabled = true;">$10<br>
<input type = "number" id ="custom_amount">

Upvotes: 3

Views: 2687

Answers (2)

yasarui
yasarui

Reputation: 6573

You can simple do like the below.by default the input element is not disabled and when any of the radio button is clicked and input box will be disabled

<!DOCTYPE html>
<html>
<head>
    <title> Radio buttons input </title>
</head>
<body>
	<input type="radio" class="radio" name="type" value = 1>$1<br>
	<input type="radio" class="radio" name="type" value = 5>$5<br>
	<input type="radio" class="radio" name="type" value = 10>$10<br>
	<input type = "number" id ="custom_amount" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


    <script>
   $('.radio').on("click",function(){
   	   $('#custom_amount').val($(this).val());
        $('#custom_amount').attr("disabled","disabled");
        console.log($('#custom_amount').val());
   });
    </script>
</body>
</html>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337637

The pattern you're trying to follow is not the standard, for the reason that it involves removing the selection from a radio group. While this is possible, it's not the intended use of a radio group, and is not very nice code.

For this reason the normal practice is to include an extra radio button which enables/disables the input when selected. Something like this:

$('.radio').change(function() {
  $('#custom_amount').prop('disabled', !$(this).is('.other'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="type" class="radio" value="1">$1</label>
<label><input type="radio" name="type" class="radio" value="5">$5</label>
<label><input type="radio" name="type" class="radio" value="10">$10</label>
<label><input type="radio" name="type" class="radio other" value="">Other:</label>
<input type="number" id="custom_amount" disabled="true">

Upvotes: 3

Related Questions