disable checkbox when i select

Question

i have a problem in html and javascript. i have tried different approach but everything didnt worked. so this is my sample code.

    <select id = "testselect" name = "testselect">
        <option> </option>
        <option id = "o1" name = "testselect" value = "1"  onselect='document.getElementById("os1").disabled = true;'> 1 </option>
        <option id = "o2"  name = "testselect" value = "2" > 2 </option>
        <option id = "o3" name = "testselect" value = "3"> 3 </option>
     </select>


     <div > 
        <input id = "os1"  type="checkbox" name="othser[]" value="7000" />cb1<br/>
        <input id = "os2"  type="checkbox" name="othser[]" value="7001"/>cb2<br/>
        <input id = "os3"  type="checkbox" name="othser[]" value="7002"/>cb3<br/>
     </div>

ok, that's the code. what i want to happen is, when i selected o1(option id), os1(checkbox id) must be disabled and when i selected o2(option id), os2(checkbox id) must be disabled, and so on. so can anyone help me?

Answer 1

Try this:

Using plain javascript:

var select;
function changeIt() {
    var allCheckboxes = document.querySelectorAll('input[type=checkbox]');
    for (var i = 0; i < allCheckboxes.length; i++) {
        allCheckboxes[i].removeAttribute('disabled');
    }
    var value = select.options[select.selectedIndex].value;
    var checkBox = document.querySelector('input[id=os' + value + ']');
    checkBox.disabled = true;
}
window.onload = function () {
    select = document.getElementById('testselect');
    select.onchange = changeIt;
    changeIt();
}

Demo

---

Using jQuery:

$('select').change(function () {
    $('input[type=checkbox]').removeAttr('disabled');
    $('input[id=os' + this.value + ']').attr('disabled', true);
});

Demo

Answer 2

My own suggestion would be to move the event-handling outside of the HTML (for ease of future maintenance and change), and take the following approach:

function disableCheck(event) {
    // get the element that was the target of the 'change' event:
    var that = event.target,
    /* find the option tags, and retrieve the option that was selected
       from that collection (nodeList) of elements: */
        opt = that.getElementsByTagName('option')[that.selectedIndex];
    /* find the element whose 'id' is equal to the 'id' of the 'option'
       once the 's' is inserted, and set the 'disabled' property to 'true': */
    document.getElementById(opt.id.replace('o', 'os')).disabled= true;
}

// bind the onchange event-handler to the element with the id of 'testselect':
document.getElementById('testselect').onchange = disableCheck;

JS Fiddle demo .

To toggle which elements are disabled (rather than simply increase the number of disabled elements):

function disableCheck(event) {
    var that = event.target,
        opt = that.getElementsByTagName('option')[that.selectedIndex],
        idToFind = opt.id.replace('o','os'),
        allInputs = document.getElementsByTagName('input');
    for (var i = 0, len = allInputs.length; i < len; i++){
        if (allInputs[i].type == 'checkbox') {
            allInputs[i].disabled = allInputs[i].id === idToFind;
        }
    }
}

document.getElementById('testselect').onchange = disableCheck;

JS Fiddle demo .

Well, this is ugly...and suggests I really need to rethink the approach above, however it does work (though it doesn't properly support IE as yet). This uses a trigger function which is fired upon the window.load event which triggers the change event from the select element-node:

function trigger(event, source) {
    var newEvent;
    if (document.createEvent) {
        newEvent = document.createEvent("HTMLEvents");
        newEvent.initEvent(event, true, true);
    } else {
        newEvent = document.createEventObject();
        newEvent.eventType = event;
    }

    newEvent.eventName = event;

    if (document.createEvent) {
        source.dispatchEvent(newEvent);
    } else {
        source.fireEvent("on" + newEvent.eventType, newEvent);
    }
}

function disableCheck(event) {
    var that = event.target,
        opt = that.getElementsByTagName('option')[that.selectedIndex],
        idToFind = opt.id.replace('o', 'os'),
        allInputs = document.getElementsByTagName('input');
    for (var i = 0, len = allInputs.length; i < len; i++) {
        if (allInputs[i].type == 'checkbox') {
            allInputs[i].disabled = allInputs[i].id === idToFind;
        }
    }
}

window.addEventListener('load', function(){
    trigger('change', document.getElementById('testselect'));
});

document.getElementById('testselect').onchange = disableCheck;

JS Fiddle demo .

Answer 3

onselect should go into the select

<script>
    function onSelect(obj){
        var x = document.getElementsByName("othser[]"); 
        for (var i in x) x[i].disabled = false; 
        document.getElementById("os"+obj.value).disabled=true;
    }
</script>
<select id = "testselect" name = "testselect" onchange='onSelect(this)'>
    <option> </option>
    <option id = "o1" name = "testselect" value = "1" > 1 </option>
    <option id = "o2"  name = "testselect" value = "2" > 2 </option>
    <option id = "o3" name = "testselect" value = "3"> 3 </option>
</select>


<div > 
    <input id = "os1"  type="checkbox" name="othser[]" value="7000" />cb1<br/>
    <input id = "os2"  type="checkbox" name="othser[]" value="7001"/>cb2<br/>
    <input id = "os3"  type="checkbox" name="othser[]" value="7002"/>cb3<br/>
</div>