Question

我的html表有很多行。每行包含一个复选框和一个组合框。当我选择组合框并获得一个值时，根据检查组合框值禁用相对行的复选框。这是我的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;
        }
    }
}

我的要求是当我选择组合框并禁用每行的启用复选框时。请与我分享一些内容。

Answer 1

使用对象的parentNode，你可以找到复选框和组合框的共享父级（可能是tr table-row元素），然后在该行中为元素选择你想。类似的东西：

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

使用某些类来简化选择可能会使事情变得更加简单。例如，给予您希望能够禁用"checkbox_will_disable"类的所有复选框，允许您使用document.getElementsByClassName函数，这意味着您不需要if chx[i].type == "checkbox" 1}}。

结束功能可能会变成：

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的{{1}}距离链条不够远（比如它是cbo而不是td或其他什么），您可以继续使用直到你足够远：

tr

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

祝你好运！

Answer 2

生成动态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/

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

2 个答案: