这几天闲着无聊,碰巧一个朋友问道radiobutton控制文本框的disabled属性,于是写了一个前台案例,供大家参考,其实也很简单。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function btn() { var radio = document.getElementById("inp"); if (radio.tag == 1) { radio.checked = false;//此处true和false 是为了方便radiobutton 在别的地方需要用到所赋的值 此处true和false和下面if无关系 radio.tag = 0; } else { radio.checked = true; radio.tag = 1; } if (radio.tag ==1) { document.getElementById("txt").disabled = true; } else { document.getElementById("txt").disabled = false; } } </script> </head> <body> <input type="radio" id="inp" name="inputbtn" οnclick="btn()"/> <input type="text" name="txt" id="txt"/> </body> </html>
代码复制了就可以用,很简答。下面是两个文本框的。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function btn1() { var radio = document.getElementById("inp1"); if (radio.tag == 1) { radio.checked = false; } else { radio.checked = true; } if (radio.checked == true) { document.getElementById("txt1").disabled = true; document.getElementById("txt2").disabled = false; } } function btn2() { var radio = document.getElementById("inp2"); if (radio.tag == 1) { radio.checked = false; } else { radio.checked = true; } if (radio.checked == true) { document.getElementById("txt2").disabled = true; document.getElementById("txt1").disabled = false; } } </script> </head> <body> <input type="radio" id="inp1" name="inputbtn" οnclick="btn1()" /> <input type="text" name="txt1" id="txt1" /> <input type="radio" id="inp2" name="inputbtn" οnclick="btn2()" /> <input type="text" name="txt2" id="txt2" /> </body> </html>