JavaScript disable two inputs with one click

Question

I have this working currently, when you press the check box, the drop down (textbox_1) becomes disabled. My question is, how to retrofit this code to also disable textbox_2 by the same click...

<html>
    <head>
        <script type="text/javascript">
        // setup a bit of code to run after the document has loaded. (note that its set on window)
        window.addEventListener('load', function(){
            potential_checkboxes = document.getElementsByTagName('input');
            for(i = 0; i < potential_checkboxes.length; i ++) {
                element = potential_checkboxes[i];
                // see if we have a checkbox

                if (element.getAttribute('type') == 'checkbox') {
                    // initial setup
                    textbox = document.getElementById(element.getAttribute('rel'));
                    textbox.disabled = element.checked;

                    // add event handler to checkbox
                    element.addEventListener('change', function() {
                        // inside here, this refers to the checkbox that just got changed
                        textbox = document.getElementById(this.getAttribute('rel'));
                        // set disabled property of textbox to not checked property of this checkbox
                        textbox.disabled = this.checked;
                    }, false);
                }               
            }
        }, false);
        </script>
    </head>
    <body>
        <h1>Enable/disable input based on checkbox.</h1>

        <form>
            <label for="textbox_1">
            <SELECT class="enteredYear" id="textbox_1" name=year>
            <OPTION selected value="">Year</OPTION>
            <OPTION value=2013>2014</OPTION>
            <OPTION value=2013>2013</OPTION>
            <OPTION value=2012>2012</OPTION>
            </SELECT>
            </label>
            <label for="textbox_2">
                Textbox 1: 
                <input id="textbox_2" type="text" value="some value" />
            </label>

            <br />
            <input id=="checkbox_1" type="checkbox" rel="textbox_1"/>
            <label for="checkbox_1">I have a classic car.</label>
            <hr />
        <form>
    </body>
</html>

I agree, i'm learning as I go, this is just something I need to figure out soon! — user1789437
– user1789437, Commented Jul 30, 2013 at 20:43
The problem you face is that this relies of rel property of the checkbox input. So the question is do you care about the ability to specify the target id to be disabled by specifying the rel value? — Mike Brant
– Mike Brant, Commented Jul 30, 2013 at 20:44
Im a PHP/MYSQL person, but loving the power of javascript - Ive used jQuery for its ajax function, since php is my thing! — user1789437
– user1789437, Commented Jul 30, 2013 at 20:44
Mike - I dont "care" but this is the code I found and changed a bit to work for me. I just need it to disable both inputs, and from that I can see how it worked! — user1789437
– user1789437, Commented Jul 30, 2013 at 20:45

federicot · Accepted Answer · 2013-07-30 20:49:25Z

3

Just "grab" the textbox_2 using document.getElementById('textbox_2'), and disable it inside your change event listener for the checkbox.

// add event handler to checkbox
element.addEventListener('change', function() {
    // inside here, this refers to the checkbox that just got changed
    textbox = document.getElementById('textbox_1');

    // ---------------------------------------------
    // Grabs the textbox_2 element
    textbox2 = document.getElementById('textbox_2');
    // ---------------------------------------------

    // set disabled property of textbox to not checked property of this checkbox
    textbox.disabled = this.checked;

    // ------------------
    // Disables textbox_2
    // ------------------
    textbox2.disabled = this.checked;
}, false);

edited Jul 30, 2013 at 20:49

answered Jul 30, 2013 at 20:44

federicot

12.3k19 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mike Brant Over a year ago

A good answer, but I would suggest that if you are going to hard-code the textbox_2 id, that you would go ahead and remove the reliance on the checkbox's rel property for disabling textbox_1 just such the behavior is consistent.

federicot Over a year ago

@MikeBrant You're right, I missed that. I tend to only change what the user wants to be changed without touching what already worked for him though, but in this case it's justifiable for the sake of consistency.

user1789437 Over a year ago

Any chance you would show me how to change the click to a drop down, and if the dropdown value is yes, it has the same function as the click?

enhzflep Over a year ago

@user1789437 - just use a handler for the onChange event of the select element. In the handler, check to see if the value is the one that corresponds to your desired option. If so, call the code that disables the inputs. I'd suggest that you name the functions, rather than using anonymous ones. This will make calling the same code from two places a snap.

Diodeus - James MacFarlane · Accepted Answer · 2013-07-30 20:43:44Z

1

Add a CSS class name to the elements you want to disable and use:

var checks = document.getElementsByClassName('disableme')

"checks" will then by an array containing those elements. Loop, disable.

answered Jul 30, 2013 at 20:43

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Ringo · Accepted Answer · 2013-07-30 20:43:28Z

0

element.addEventListener('change', function() {
  // inside here, this refers to the checkbox that just got changed
  textbox = document.getElementById(this.getAttribute('rel'));
  textbox.disabled = this.checked;
  textbox2 = document.getElementById('textbox_2');
  textbox2.disabled = this.checked;
}, false);

answered Jul 30, 2013 at 20:43

Ringo

5,5333 gold badges35 silver badges52 bronze badges

Comments

Kamala · Accepted Answer · 2013-07-30 20:50:22Z

0

If you want to stick with a similar approach, you could do something like this:

<input id=="checkbox_1" type="checkbox" rel="textbox_1,textbox_2"/>

element.addEventListener('change', function() {
    var ids = this.getAttribute('rel').split(",");
    for(var i = 0; i < ids.length; i++) {
        textbox = document.getElementById(ids[i]);
        // set disabled property of textbox to not checked property of this checkbox
        textbox.disabled = this.checked;
    }
}, false);

answered Jul 30, 2013 at 20:50

Kamala

693 bronze badges

Collectives™ on Stack Overflow

JavaScript disable two inputs with one click

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related