使用javascript通过选择组合框值禁用启用复选框

Question

我的html表有许多rows.One复选框，每一行包含一个组合框。当我选择组合框并得到一个值，然后根据复选框禁用相对行复选框时，value.Here是我的javascript方法。

    function check(cbo) {
    var chx = document.getElementsByTagName('input');
    for ( var i = 0; i < chx.length; i++) {
        if (chx[i].type == 'checkbox') {
            chx[i].disabled = (cbo.value == 'D') ? true : false;
        }
    }
}

我的要求是，当我选择组合框并禁用每个row.Please的启用复选框时，请与我共享一些内容。

Answer 1

生成一个动态id (数字)并在选中和复选框中附加id，如下所示：

<table width="100%" border="1">
<tr>
    <td>Row - 1</td>
    <td>
        <select id="select1" 
            onchange="checkTheCheckbox('select1', 'check1');">
            <option value="false" selected="true">Default</option>
            <option value="true">Check</option>
            <option value="false">Uncheck</option>
        </select>
    </td>
    <td>
        <input type="checkbox" name="check1" id="check1" />
    </td>
</tr>
<tr>
    <td>Row - 2</td>
    <td>
        <select id="select2" 
            onchange="checkTheCheckbox('select2', 'check2');">
            <option value="true" selected="true">Default</option>
            <option value="true">Check</option>
            <option value="false">Uncheck</option>
        </select>
    </td>
    <td>
        <input type="checkbox" name="check2" id="check2" checked />
    </td>
 </tr>
</table>

添加以下javascript方法：

function checkTheCheckbox(selectId, checkId){
    var ddl = document.getElementById(selectId);
    for(var i= 0; i < ddl.length; i++){
        if(ddl[i].selected){
            var status = ddl[i].value === 'true' ? true : false;
            document.getElementById(checkId).checked = status;
        }
    }
}

工作示例：http://jsfiddle.net/gRAb6/

Answer 2

使用对象的parentNode，您可以找到复选框和组合框(可能是tr表行元素)的共享父元素，然后在该行中为您想要的元素进行选择。类似于：

function check(cbo) {
    var parent = cbo.parentNode;
    var chx = parent.getElementByTagName('input');
    ...
}

对于您来说，使用某些类使选择更容易，这可能会使事情变得简单得多。例如，将希望禁用的所有复选框赋予"checkbox_will_disable"类，将允许您使用document.getElementsByClassName函数，这意味着您不再需要if chx[i].type == "checkbox"了。

结束功能可以变成如下内容：

function check(cbo) {
    var parent = cbo.parentNode;
    var chx = parent.getElementByClassName('checkbox_will_disable');
    for (var i=0; i < chx.length; i++) {
        chx[i].disabled = (cbo.value == 'D') ? true : false;
    }
}

如果parentNode of cbo在链上不够远(比方说它是td而不是tr或其他什么的)，您可以继续使用它，直到足够高：

var parent = cbo.parentNode.parentNode;

说。还有更优雅的方法来做这些事情，例如使用jQuery。如果它变得足够复杂，您可能会发现切换到javascript框架(如淘汰赛 )更容易。

祝好运!