mvc +局部视图+复选框单击事件

时间:2017-07-14 11:28:40

标签: javascript c# jquery asp.net-mvc

我创建了一个局部视图,并在同一页面中使用n次。部分视图放在手风琴(div)内,当单击一个复选框时,应禁用文本框。

当我渲染使用局部视图5次的页面时,我单击复选框,然后仅在第一个局部视图中禁用文本框。相同的功能在任何其他功能中都不起作用。

当我将调试器放置在所有部分视图中时,它会被命中,但文本框不会被禁用。这仅适用于第一个局部视图,但在其余部分视图中失败。

请找到以下代码..

<table>
    <tr>
        <th>Select Recurrance:</th>
        <th>Start DateTime:</th>
        <th>End DateTime:</th>
    </tr>
    <tr>
        <td>
            <div style="margin-top: -0.0em;">
                <select id="Recurrances" onchange="SubmitRecurrance(this)">
                    <option selected="selected" value="1">Run Continuosly</option>
                    <option value="2">Run on Schedule</option>
                </select>
                <br />
                @Html.ValidationMessageFor(model => model.Recurrance)
            </div>
        </td>
        <td>
            <div style="margin-top: -0.0em;">
                @Html.TextBoxFor(model => model.StartDateTime, new { @class = "form-control date-picker", @placeholder = "Start Date&Time", id = "starttime", onkeyup = "FormDirty();" })
                <br />
                @Html.ValidationMessageFor(model => model.StartDateTime)
            </div>
        </td>
        <td>
            <div style="margin-top: -0.0em;">
                @Html.TextBoxFor(model => model.EndDateTime, new { @class = "form-control date-picker", @placeholder = "End Date&Time", id = "endtime", onkeyup = "FormDirty();" })
                <br />
                @Html.ValidationMessageFor(model => model.StartDateTime)
            </div>
        </td>
    </tr>
    <tr>
        <td id="divnoenddate">
            <div>
                <span> No End Date</span>@Html.CheckBox("NoEndDate", false, new { id = "noenddate", onchange = "javascript:ChangeCheckBox()" })
                <br />
            </div>
        </td>
        <td id="recureveryoption">
            <span style="font-weight:bold;">Recur Every:</span> <div>
                <select id="RecurEvery">
                    <option selected="selected" value="1">Daily</option>
                    <option value="2">Weekly</option>
                    <option value="3">Monthly</option>
                    <option value="4">Yearly</option>
                </select>
            </div>
        </td>
        <td>
            <div>
                <input type="submit" value="Save" style=" width: 8em;height: 2em;text-align: center;padding-top: 6px;background: #0082BF;font-size: 1em; color: #0082BF; cursor:pointer; color:white;font-size: 1em; padding-left:6px; padding-right:6px;padding-bottom:6px;" onclick="SubmitChanges()" />
             </div>
        </td>

    </tr>

</table>

function ChangeCheckBox()
    {
        if (document.getElementById("Recurrances").value != 1)
        {
            debugger;
            if (document.getElementById('noenddate').checked == true)
            {
                document.getElementById("endtime").disabled = true;
            }
            else
            {
                document.getElementById("endtime").disabled = false;
            }
        }
    }

我将上述部分视图称为:

<div>
  @Html.Partial("~/Views/Settings/ScedularControl.cshtml") 
</div>

1 个答案:

答案 0 :(得分:0)

发送到局部视图的参数索引而不是使用复选框,如下面的html帮助列表项:

@Html.CheckBox("SameModel["+index+"].Checked",false)