如果選中了復選框，則禁用輸入字段

Question

我試圖基於用戶使用javascript禁用表單中的輸入字段。 僅當選中復選框ID“ DD”時，才需要啟用DD號，銀行，日期和分支字段。 我試圖這樣，但它不起作用。

<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 。 每次單擊任何一個單選按鈕都需要調用它。 此外， input對象上沒有enabled屬性。 這就是你想要的。

 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函數。

  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

問題是您在表單提交和變量DD上使用了未聲明的功能f1() ，可能您需要使用函數paycheck()和變量pay 。 再次，字段date缺少id屬性。 您也可以將代碼簡化為：

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

下面的代碼正在使用表單提交事件：

 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; } 

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

下面的代碼正在使用單選更改事件：

 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; } 

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