Question

我正在尝试使用javascript根据用户输入禁用表单中的输入字段。 DD号，银行，日期和分支字段只有在复选框ID＆＃34; DD＆＃34;检查。我试过这样但不起作用。

<script type="text/javascript">
    function paycheck()
    {
    var pay=document.getElementById("DD");
    var bank=document.getElementById("bank");
    var ddno=document.getElementById("ddno");
    var date=document.getElementById("date");
    var branch=document.getElementById("branch");
    ddno.disabled = true;
    bank.disabled = true;
    date.disabled = true;
    branch.disabled = true;
    if(DD.checked)//If Checked Disable
    {
    ddno.enabled = true;
    bank.enabled = true;
    date.enabled = true;
    branch.enabled = true;
    }
    }
    </script>

    <form name="f1" onsubmit="f1()">
    <b>Payment Details:</b> DD<input type="radio" name="pay" value="DD" id="DD"> Cash<input type="radio" name="pay" value="Cash" id="Cash">
    <br>
    <b>DD No:</b>
    <input type="text" name="ddno" id="ddno">
    <br>
    <b>Date:</b>
    <input type="date" name="date">
    <br>
    <b>Bank:</b>
    <input type="text" name="bank" id="bank">
    <br>
    <b>Branch:</b>
    <input type="text" name="branch" id="branch">
    <br>
    <b>Amount:</b>
    <input type="number" name="amount" id="amount">
    <br>
    <input type="submit" value="Submit">
    </form>

Answer 1

我没有看到paycheck在任何地方被调用。每次单击任一单选按钮都需要调用它。此外，enabled对象上没有input属性。这就是你想要的。

var pay = document.getElementById("DD");
var cash = document.getElementById("Cash");
var bank = document.getElementById("bank");
var ddno = document.getElementById("ddno");
var date = document.getElementById("date");
var branch = document.getElementById("branch");

pay.onclick = cash.onclick = paycheck;

function paycheck() {
  ddno.disabled = bank.disabled = date.disabled = branch.disabled = cash.checked;
};

<form name="f1" onsubmit="f1()">
  <b>Payment Details:</b> DD
  <input type="radio" name="pay" value="DD" id="DD" checked="checked">Cash
  <input type="radio" name="pay" value="Cash" id="Cash">
  <br>
  <b>DD No:</b>
  <input type="text" name="ddno" id="ddno">
  <br>
  <b>Date:</b>
  <input type="date" name="date" id="date">
  <br>
  <b>Bank:</b>
  <input type="text" name="bank" id="bank">
  <br>
  <b>Branch:</b>
  <input type="text" name="branch" id="branch">
  <br>
  <b>Amount:</b>
  <input type="number" name="amount" id="amount">
  <br>
  <input type="submit" value="Submit">
</form>

Answer 2

试试这个 ，并记得在[onClick =“paycheck（）;”]; 的两个复选框上调用 Paycheck 功能p>

    function paycheck() {
		var pay1=document.getElementById("DD");
		var pay2=document.getElementById("Cash");
		var bank=document.getElementById("bank");
		var ddno=document.getElementById("ddno");
		var date=document.getElementById("date");
		var branch=document.getElementById("branch");
		if(pay1.checked) { //If Checked Disable
			console.log("DD")
			ddno.disabled = false;
			bank.disabled = false;
			date.disabled = false;
			branch.disabled = false;
		}
		
		if(pay2.checked) { //If Checked Disable
			console.log("Cash")
			ddno.disabled = true;
			bank.disabled = true;
			date.disabled = true;
			branch.disabled = true;	
		}
    }

<form name="f1" onsubmit="f1()">
    <b>Payment Details:</b> DD<input type="radio" name="pay" value="DD" id="DD" onClick="paycheck();"> Cash<input type="radio" name="pay" value="Cash" id="Cash" onClick="paycheck();">
    <br>
    <b>DD No:</b>
    <input type="text" name="ddno" id="ddno">
    <br>
    <b>Date:</b>
    <input type="date" name="date" id="date">
    <br>
    <b>Bank:</b>
    <input type="text" name="bank" id="bank">
    <br>
    <b>Branch:</b>
    <input type="text" name="branch" id="branch">
    <br>
    <b>Amount:</b>
    <input type="number" name="amount" id="amount">
    <br>
    <input type="submit" value="Submit">
</form>

Answer 3

问题是您在表单提交和变量f1()上使用了未声明的功能DD，可能需要使用函数paycheck()和变量pay。字段date再次缺少id属性。您还可以将代码缩减为：

ddno.disabled = bank.disabled = date.disabled = branch.disabled = !pay.checked;

以下代码使用表单提交事件：

＆＃13;

function paycheck() {
  var pay = document.getElementById("DD");
  var bank = document.getElementById("bank");
  var ddno = document.getElementById("ddno");
  var date = document.getElementById("date");
  var branch = document.getElementById("branch");
  ddno.disabled = bank.disabled = date.disabled = branch.disabled = !pay.checked;
}

＆＃13;

<form name="f1" onsubmit="paycheck();">
  <b>Payment Details:</b> DD
  <input type="radio" name="pay" value="DD" id="DD">Cash
  <input type="radio" name="pay" value="Cash" id="Cash">
  <br>
  <b>DD No:</b>
  <input type="text" name="ddno" id="ddno">
  <br>
  <b>Date:</b>
  <!-- added id -->
  <input type="date" name="date" id="date">
  <br>
  <b>Bank:</b>
  <input type="text" name="bank" id="bank">
  <br>
  <b>Branch:</b>
  <input type="text" name="branch" id="branch">
  <br>
  <b>Amount:</b>
  <input type="number" name="amount" id="amount">
  <br>
  <input type="submit" value="Submit">
</form>

＆＃13;

下面的代码是使用无线电更改事件：

＆＃13;

function paycheck(val) {
  var bank = document.getElementById("bank");
  var ddno = document.getElementById("ddno");
  var date = document.getElementById("date");
  var branch = document.getElementById("branch");
  ddno.disabled = bank.disabled = date.disabled = branch.disabled = "DD" !== val;
}

＆＃13;

<form name="f1">
  <b>Payment Details:</b> DD
  <input type="radio" name="pay" value="DD" id="DD" onchange="paycheck(this.value);" checked=''>Cash
  <input type="radio" name="pay" value="Cash" id="Cash" onchange="paycheck(this.value);">
  <br>
  <b>DD No:</b>
  <input type="text" name="ddno" id="ddno">
  <br>
  <b>Date:</b>
  <!-- added id -->
  <input type="date" name="date" id="date">
  <br>
  <b>Bank:</b>
  <input type="text" name="bank" id="bank">
  <br>
  <b>Branch:</b>
  <input type="text" name="branch" id="branch">
  <br>
  <b>Amount:</b>
  <input type="number" name="amount" id="amount">
  <br>
  <input type="submit" value="Submit">
</form>

＆＃13;

如果选中复选框则禁用输入字段

3 个答案: