Question

这应该非常简单，但我无法让它工作 - 我试图在用户点击复选框时禁用2个下拉列表。

@Html.DropDownList("StartTime", new List<SelectListItem>
{
    new SelectListItem{ Text="10:00 AM", Value = "10:00 AM" },
    new SelectListItem{ Text="12:00 PM", Value = "12:00 PM" },
    new SelectListItem{ Text="2:00 PM", Value = "2:00 PM" }
}

@Html.DropDownList("EndTime", new List<SelectListItem>
{
    new SelectListItem{ Text="10:00 AM", Value = "10:00 AM" },
    new SelectListItem{ Text="12:00 PM", Value = "12:00 PM" },
    new SelectListItem{ Text="2:00 PM", Value = "2:00 PM" }
}
@Html.CheckBox("chkAllDayEvent", new { @onclick = "AllDayEvent_Checked();" })

<script type='text/javascript'>

function AllDayEvent_Checked() {
    $("#chkAllDayEvent").click(function () {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
    });
}
</script>

我的问题是，当我到达页面时，Javascript不会触发，直到我单击复选框3次 - 在第3次它禁用文本框，然后按照正常工作。

Answer 1

试试这个

$(function(){
    $("#chkAllDayEvent").click(function () {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
    });
});

@Html.CheckBox("chkAllDayEvent", new { @id = "chkAllDayEvent" })

您不需要AllDayEvent_Checked功能。因为你使用jquery绑定它。

或

function AllDayEvent_Checked() {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
}

@Html.CheckBox("chkAllDayEvent", new { "@onclick" = "AllDayEvent_Checked();" })

Answer 2

这是因为您有一个功能可以将一个单击处理程序分配给一个复选框。然后在单击复选框时触发此功能。因此，当首次单击该复选框时，您会为该复选框分配一个单击处理程序，而不是触发单击处理程序，这就是您想要的。

试试这个：

<script type='text/javascript'>
$(document).ready(function () {
    $("#chkAllDayEvent").click(function () {
        $('#EndTime').attr("disabled", $(this).is(':checked'));
        $('#StartTime').attr("disabled", $(this).is(':checked'));
    });
});
</script>

@Html.CheckBox("chkAllDayEvent", new { @id = "chkAllDayEvent" })

Answer 3

试试这个

@Html.CheckBox("chkAllDayEvent", new {@onclick = "AllDayEvent_Checked();" })

function AllDayEvent_Checked() {    
    $('#EndTime').attr("disabled", $("#chkAllDayEvent").is(':checked'));
    $('#StartTime').attr("disabled", $("#chkAllDayEvent").is(':checked'));

}

Answer 4

function AllDayEvent_Checked() {
    $('#EndTime').attr("disabled", $(this).is(':checked'));
    $('#StartTime').attr("disabled", $(this).is(':checked'));
}

@Html.CheckBox("chkAllDayEvent", new { "@onclick" = "AllDayEvent_Checked();" })

ASP.NET MVC Javascript在页面加载时没有第一次触发

4 个答案: