Member Avatar for saranya_arun

I have 4 radio buttons and 4 text boxes, say for eg: r1, r2, r3 and r4 and t1, t2, t3 and t4 respectively. On load of the page all 4 text boxes will be disabled, when i click on r1, t1 must get enabled. When i click on r2, t2 must be enabled, similarly the other two. This works fine for me. However, when i click r2 only t2 must be enabled and all the other text boxes must be disabled. That is, if i click r1 first (t1 will be enabled) then click r2 (t2 will be enabled in addition to t1 being enabled) i want only t2 being enabled. How do i disabled t1 and enable t2 on the same click?

Can some one help me?:?:

  • 3 Contributors
  • 2 Replies
  • 238 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for digital-ether

I have 4 radio buttons and 4 text boxes, say for eg: r1, r2, r3 and r4 and t1, t2, t3 and t4 respectively. On load of the page all 4 text boxes will be disabled, when i click on r1, t1 must get enabled. When i click on r2, t2 must be enabled, similarly the other two. This works fine for me. However, when i click r2 only t2 must be enabled and all the other text boxes must be disabled. That is, if i click r1 first (t1 will be enabled) then click r2 (t2 will be enabled in addition to t1 being enabled) i want only t2 being enabled. How do i disabled t1 and enable t2 on the same click?

Can some one help me?:?:

Post some of your code so that we can take a look at it.

Member Avatar for ~s.o.s~

You should be able to achieve what you want by making small changes in your existing code. Paste your code as digital-ether mentioned so we can give some suggestions. Here is how I would personally do it:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript">
    function init() {
        initEvents();
    }

    function initEvents() {
        var radDiv = document.getElementById && document.getElementById("divRadio");
        var txtDiv = document.getElementById && document.getElementById("divText");
        if(!radDiv || !txtDiv) {
            return;
        }
        var radGroup = radDiv.getElementsByTagName("input");
        var txtGroup = txtDiv.getElementsByTagName("input");
        for(var i = 0, max = radGroup.length; i < max; ++i) {
            var r = radGroup[i];
            addEvent(r, "click", (function(r, i) {
                return(function() {
                    for(var j = 0, max = txtGroup.length; j < max; ++j) {
                        if(j == i) {
                            txtGroup[j].disabled = false;
                        }
                        else {
                            txtGroup[j].disabled = true;
                        }
                    }
                });
            })(r, i));
        }
    }

    function addEvent(el, ev, fn) {
        if(el.addEventListener) {
            el.addEventListener(ev, fn, false)
        }
        else {
            el.attachEvent('on' + ev, fn)
        }
    }
    window.onload = init;
    </script>
</head>
<body id="body">
    <form id="frm" name="frm" action="#">
        <div id="divText">
            <input name="txtOne" value="Text One" disabled="disabled" /><br />
            <input name="txtTwo" value="Text Two" disabled="disabled" /><br />
            <input name="txtThree" value="Text Three" disabled="disabled" /><br />
        </div>
        <br />
        <div id="divRadio">
            <input type="radio" name="rad" id="radOne" value="one" />
            <label for="radOne">One</label><br />
            <input type="radio" name="rad" id="radTwo" value="two" />
            <label for="radTwo">Two</label><br />
            <input type="radio" name="rad" id="radThree" value="three" />
            <label for="radThree">Three</label><br />
        </div>
    </form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.