Disable <select> when checkbox enabled

Question

I want to use javascript to set the attribute disabled="disabled" to the with id age 2 when the checkbox with id "exactage" is enabled. Any ideas? Thanks in advance. A happy coder :)

 <select id="age">
        <option value="18"><18</option>
    </select>

    <select id="age2">
        <option value="18"><18</option>
    </select>

   <input type="checkbox" id="exactage"/> Require exact age

Answer 1

Note that I had a momentary blind-spot when I wrote this answer: I could've sworn that I saw a jquery tag. Sigh. My mistake, it's not worth revising this answer, now, since other functional plain JS answers are posted, that I can't improve upon.

I will, however, change this to community wiki, and leave it for the moment as further information.

---

The following should work for you, if you're using jQuery (see my above addenda, regarding blind-spots):

$('#exactage').change(
    function(){
        if ($(this).is(':checked')){
            $('#age2').prop('disabled',true);
        }
        else {
            $('#age2').prop('disabled',false);
        }
    });

On the change event of the #exactage checkbox the if checks whether $(this) is, or is not, :checked . If it is then it sets the disabled property of the #age2 element, otherwise it removes/unsets the disabled property.

References:

• change() .
• :checked selector .
• is() .
• prop() .

Answer 2

If by enabled you mean checked

if(document.getElementById('exactage').checked)
    document.getElementById('age2').setAttribute('disabled', 'disabled');

If by enabled you actually mean enabled, you can do this:

if(document.getElementById('exactage').getAttribute('disabled') !== null)
    document.getElementById('age2').setAttribute('disabled', 'disabled');

Answer 3

You can try onclick or onselect (I think there is something like that) attribute to call a method In the method try

document.getElementById('age2').setEnabled(false) 

or

    document.getElementById('age2').disabled=disabled

Something along that line.. I can't remember :(

Answer 4

Try using the following.

if(document.getElementById('exactage').checked)
{
    document.getElementById('age2').disabled=true;
}

Answer 5

First you need these

function changeState(id, state)
{
    if(state == 0)
        document.getElementById(id).disabled = true;
    else
        document.getElementById(id).disabled = false;
}

function toggleFields(id, state)
{
    var e=document.getElementById(id);
    if(!e)return true;
    if(state == 1)
    {
        e.style.display=""
    }
    else
    {
        e.style.display="none";
    }
    return true;
}

Followed by these

function checkBoxState(check_box_id, field_id, flag)
{
    if(document.getElementById(check_box_id).checked)
    {
        if(flag == 1)
            toggleFields(field_id, 1);
        else if(flag == 0)
            changeState(field_id, 1);
        document.getElementById(check_box_id).value = 1;
    } else {
        if(flag == 1)
            toggleFields(field_id, 0);
        else if(flag == 0)
            changeState(field_id, 0);
        document.getElementById(check_box_id).value = 0;
    }
}

function reversedCheckBoxState(check_box_id, field_id, flag)
{
    if(document.getElementById(check_box_id).checked)
    {
        if(flag == 1)
            toggleFields(field_id, 0);
        else
            changeState(field_id, 0);
        document.getElementById(check_box_id).value = 1;
    } else {
        if(flag == 1)
            toggleFields(field_id, 1);
        else
            changeState(field_id, 1);
        document.getElementById(check_box_id).value = 0;
    }
}

And now all you will have to do is to run reversedCheckBoxState("exactage", "age2" 0) Or you can run reversedCheckBoxState("exactage", "age2" 1)

Enjoy!