Question

我有2个单选按钮（启用/禁用）和3个文本框。如果单击禁用单选按钮，我想禁用3个文本框。

<Input type = 'Radio' Name ='target' value= 'r1'>Enable 
<Input type = 'Radio' Name ='target' value= 'r2'>Disable 
T1: <input type="text" name="t1"> 
T2: <input type="text" name="t2"> 
T3: <input type="text" name="t3">

只要选择其中一个单选按钮，就会发生此更改。我正在使用PHP。 TIA！

Answer 1

虽然使用jQuery会使其变得更容易，但以下是纯粹在JavaScript中实现它的一种方法：

＆＃13;

let textboxes = document.querySelectorAll('input[type=text]');

document.querySelectorAll('input[name=target]')
  .forEach(function(radio) {
    radio.addEventListener('change', function(e) {
      let value = e.target.value;

      if (value === 'r1') {
        textboxes
          .forEach(function(textbox) {
            textbox.disabled = false;
          });
      } else if (value === 'r2') {
        textboxes
          .forEach(function(textbox) {
            textbox.disabled = true;
          });
      }
    });
  });

＆＃13;

<Input type='Radio' Name='target' value='r1'>Enable
<Input type='Radio' Name='target' value='r2'>Disable
<br><br>

T1: <input type="text" name="t1">
T2: <input type="text" name="t2">
T3: <input type="text" name="t3">

＆＃13;

它基本上会监听单选按钮的change事件和文本框中的循环以启用/禁用它们。

Answer 2

根据我的评论这是代码。将jquery代码与其他文本框一起使用。确保你应该在代码顶部包含jquery库

	$(document).ready(function() {
	  $("#enable").click(function() {
	    	$("#t1").attr("disabled", false);
	   });

	  $("#disable").click(function() {
	    	$("#t1").attr("disabled", true);
	   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<Input type = 'Radio' Name ='target' value= 'r1' id="enable">Enable 
<Input type = 'Radio' Name ='target' value= 'r2' id="disable">Disable 
T1: <input type="text" name="t1" id="t1"> 

  
  </body>
</html>

Answer 3

	$('.radio').click(function(e) {
        var val = $(this).val();
		    if(val=="r2") $('input[type="text"]').attr('disabled','disabled'); 
	    	else  $('input[type="text"]').removeAttr('disabled');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><Input class="radio" type = 'Radio' checked Name ='target' value= 'r1'>Enable </label>
<label><Input class="radio" type = 'Radio' Name ='target' value= 'r2'>Disable </label><br /><br />
T1: <input type="text" name="t1"> 
T2: <input type="text" name="t2"> 
T3: <input type="text" name="t3">

Answer 4

当您使用PHP这是服务器端语言时，所以每当您点击radiobutton时刷新页面，radiobutton将返回未选中状态。所以为此，你必须使用javascript和jquery是使用DOM元素的最佳方式。您只需要添加更多代码行。

<script type="text/javascript">
$(document).ready(function() {
  $("#enable").click(function() {
        $("#t1").attr("disabled", true);
   });

  $("#disable").click(function() {
        $("#t1").attr("disabled", false);
   });

}）;

不要忘记在HTML标记中添加jquery。

单击单选按钮时，使用PHP启用禁用文本字段

4 个答案: