Question

我有一个文本字段和其他三个单选按钮。

我必须添加捐款金额，无论是从文本框填写的自定义金额，还是单击具有固定值的单选按钮。

<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">

我想在点击任何单选按钮时禁用输入字段，当我点击文本字段时，它会被启用。

有可能吗？正如我尝试使用

<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">

Answer 1

您尝试遵循的模式不是标准，因为它涉及从广播组中删除选择。虽然这是可能的，但它不是无线电组的预期用途，并且不是很好的代码。

出于这个原因，通常的做法是包括一个额外的单选按钮，在选择时启用/禁用输入。像这样：

＆＃13;

$('.radio').change(function() {
  $('#custom_amount').prop('disabled', !$(this).is('.other'));
});

＆＃13;

<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">

＆＃13;

Answer 2

你可以像下面那样简单。默认情况下，输入元素没有被禁用，当点击任何单选按钮并且输入框将被禁用时

<!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>

如何在单击单选按钮时启用文本字段

2 个答案: