Question

我在html和javascript中遇到问题。我尝试过不同的方法，但一切都没有用。所以这是我的示例代码。

    <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>

好的，这就是代码。我想要发生的是，当我选择o1（选项ID）时，必须禁用os1（复选框ID），当我选择o2（选项ID）时，必须禁用os2（复选框ID），依此类推。所以有人可以帮助我吗？

Answer 1

试试这个：

使用普通的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

使用jQuery：

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

Demo

Answer 2

我自己的建议是将事件处理移到HTML之外（以便日后维护和更改），并采取以下方法：

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

要切换哪些元素为disabled（而不是简单地增加disabled元素的数量）：

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

嗯，这很难看......并且建议我真的需要重新考虑上面的方法，但工作（尽管它还没有正确支持IE）。这使用触发器函数，该函数在window.load事件触发，该事件从change元素节点触发select事件：

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应该进入选择

<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>

我选择时禁用复选框

3 个答案:

Demo

Demo