关于radiobutton的true和false问题以及radiobutton控制文本框的可否输入。

这几天闲着无聊，碰巧一个朋友问道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" onclick="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" onclick="btn1()" />
    <input type="text" name="txt1" id="txt1" />
    <input type="radio" id="inp2" name="inputbtn" onclick="btn2()" />
    <input type="text" name="txt2" id="txt2" />
</body>
</html>
posted @ 2017-10-26 16:13  木子丶  阅读(309)  评论(0)  编辑  收藏  举报