javascript - 禁用/启用动态生成的表单字段的功能

Question

我不是 JavaScript 专家，我目前正在尝试为表单创建一个函数，该函数根据上一页上选择的数字重复相同的字段。

表单字段可能有 1 到 10 行，每行都有一个单选按钮选择，可启用/禁用每一行。

目前我已经写了一些东西，但在连接表单字段名称和变量名称时遇到了麻烦。

有谁能指出我正确的方向吗？

Javascript:

        var i = 1;
    var iChildren = 2; //could be any number - depends what user selected.

    function toggle(switchElement) {
        for (i = 1; i = iChildren; i++) {

            var frmSchoolSelected+i = document.getElementById('<%=c_' & i & '_selected.ClientID%>');
            var frmSchoolAge+i = document.getElementById('<%=c_' & i & '_type.ClientID%>');
            var frmSchoolType+i = document.getElementById('<%=c_' & i & '_type1.ClientID%>');
            var frmSchoolAdditional+i = document.getElementById('<%=c_' & i & '_additional.ClientID%>');

            if (switchElement.value == 'Yes') {
                frmSchoolSelected+i.disabled = false;
                frmSchoolAge+i.disabled = true;
                frmSchoolType+i.disabled = true;
                frmSchoolAdditional+i.disabled = true;
            }
            else {
                frmSchoolSelected+i.disabled = true;
                frmSchoolAge+i.disabled = false;
                frmSchoolType+i.disabled = false;
                frmSchoolAdditional+i.disabled = false;
            }
        }
    }

感谢您的帮助。

J.

已编辑

生成的表单 HTML 示例。

<form method="post" action="schoolingform.aspx" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'Button1')" id="form1">

    <table id="Table1" cellspacing="0" cellpadding="0" style="border-width:0px;border-collapse:collapse;">
        <tr>
            <td><strong>School Selected</strong></td>
            <td colspan="4"><span id="c_1_school_selected" onlick="javascript:toggle(this);">
                <input id="c_1_school_selected_0" type="radio" name="c_1_school_selected" value="Yes" />
                <label for="c_1_school_selected_0">Yes</label>
                <input id="c_1_school_selected_1" type="radio" name="c_1_school_selected" value="No" />
                <label for="c_1_school_selected_1">No</label>
                </span></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Child</th>
            <th style="border-right:1px solid #dddddd;">School Name</th>
            <th>School Type</th>
            <th>School Type</th>
            <th>Additional Information</th>
        </tr>
        <tr valign="top">
            <td><strong>Fred Wilkinson</strong></td>
            <td style="border-right:1px solid #dddddd;"><input name="c_1_selected" type="text" id="c_1_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
                <input type="hidden" name="c_1_id" id="c_1_id" value="22" /></td>
            <td><select name="c_1_type" id="c_1_type" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="Primary">Primary</option>
                    <option value="Secondary">Secondary</option>
                    <option value="Higher Education">Higher Education</option>
                </select></td>
            <td><select name="c_1_type1" id="c_1_type1" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="State">State</option>
                    <option value="Independent">Independent</option>
                </select></td>
            <td><textarea name="c_1_additional" rows="6" cols="30" id="c_1_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
        </tr>
        <tr>
            <td><strong>School Selected</strong></td>
            <td colspan="4"><span id="c_2_school_selected" onlick="javascript:toggle(this);">
                <input id="c_2_school_selected_0" type="radio" name="c_2_school_selected" value="Yes" />
                <label for="c_2_school_selected_0">Yes</label>
                <input id="c_2_school_selected_1" type="radio" name="c_2_school_selected" value="No" />
                <label for="c_2_school_selected_1">No</label>
                </span></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Child</th>
            <th style="border-right:1px solid #dddddd;">School Name</th>
            <th>School Type</th>
            <th>School Type</th>
            <th>Additional Information</th>
        </tr>
        <tr valign="top">
            <td><strong>Sara Wilkinson</strong></td>
            <td style="border-right:1px solid #dddddd;"><input name="c_2_selected" type="text" id="c_2_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
            <input type="hidden" name="c_2_id" id="c_2_id" value="23" /></td>
            <td><select name="c_2_type" id="c_2_type" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="Primary">Primary</option>
                    <option value="Secondary">Secondary</option>
                    <option value="Higher Education">Higher Education</option>
                </select></td>
            <td><select name="c_2_type1" id="c_2_type1" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="State">State</option>
                    <option value="Independent">Independent</option>
                </select></td>
            <td><textarea name="c_2_additional" rows="6" cols="30" id="c_2_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
        </tr>
        <tr>
            <td align="right" colspan="5"></td>
        </tr>
    </table>
    <input type="hidden" name="iChild" id="iChild" value="2" />
    <input type="submit" name="Button1" value="Next" id="Button1" class="submitBtn" />

Answer 1

您正在混合 .NET 代码和 JavaScript 代码。因为 .NET 首先运行，所以它会尝试处理您编写的代码:

<%=c_' & i & '_selected.ClientID%>

并且很可能会生成错误消息，因为这是无效代码。

更简单的解决方案可能是使用类名。然后使用 jQuery，您可以将所有代码压缩到一个调用中:

$('.ClassName').toggle();