Javascript 选择时禁用复选框

我在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必须被禁用，依此类推。有人能帮我吗

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

---

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

试试这个：

使用纯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();
}

试试这个：

使用纯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();
}

---

我个人的建议是将事件处理移到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;

要切换禁用的图元，而不是简单地增加禁用图元的数量，请执行以下操作：

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;

---

.

我个人的建议是将事件处理移到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;

要切换禁用的图元，而不是简单地增加禁用图元的数量，请执行以下操作：

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;

---

.

onselect应该放在标记中，而不是选项中。我试图将onselect='ifthis.value==1{document.getElementByIdos1.disabled=true；}'放在select标记中，并将onselect从选项中删除，但仍然不起作用。您使用的浏览器是什么？可能浏览器不支持选项标记中的onselect。我使用最新版本的google chromethis.options[this.selectedIndex].valueonselect应该放在标记中，而不是选项中。我尝试将onselect='ifthis.value==1{document.getElementByIdos1.disabled=true；}放在选择标记中，并从选项中删除onselect，但仍然，不工作您使用的是哪种浏览器？可能浏览器不支持选项标记中的onselect。我使用的是最新版本的google chromethis.options[this.selectedIndex].value OP没有提到jQuery。对于downvorters，我还添加了一个vanilla JS版本。先生，我在使用onchange时遇到了一个问题，当我在一个选项中放入，selected=true时，onchange将不会work@sergio它不起作用，当我更改值时它会起作用，但是看，selected=true在o1内，而os1不在disabled@egt1993啊哈，我理解你。你想要这样吗？这篇文章没有提到jQuery，我还添加了一个普通的JS版本。先生，我在使用onchange时遇到了一个问题，当我在一个选项中放入，selected=true时，onchange将不会work@sergio它不起作用，当我更改值时它会起作用，但是看，selected=true在o1内，而os1不在disabled@egt1993啊哈，我理解你。你想要这样吗？谢谢，先生，但是如果我把，selected=true放在一个选项里呢？onchange不适用？啊，那么如果在页面加载时选择了一个选项，你想自动禁用相关的输入吗？还是我误解了？谢谢你，先生，但是如果我在一个选项中输入，selected=true怎么办？onchange不适用？啊，那么如果在页面加载时选择了一个选项，你想自动禁用相关的输入吗？还是我误解了？