0

これは非常に単純なはずですが、機能させることができません。ユーザーがチェックボックスをクリックしたときに 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>

私の問題は、ページにアクセスしたときに、チェックボックスを 3 回クリックするまで Javascript が起動しないことです。3 回目にはテキスト ボックスが無効になり、通常どおりに動作します。

4

4 に答える 4

4

これを試して

$(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();" })
于 2013-06-24T11:58:01.883 に答える
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" })
于 2013-06-24T11:57:40.623 に答える
1

これを試して

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

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

}
于 2013-06-24T11:52:55.217 に答える
0 
function AllDayEvent_Checked() {
    $('#EndTime').attr("disabled", $(this).is(':checked'));
    $('#StartTime').attr("disabled", $(this).is(':checked'));
}

@Html.CheckBox("chkAllDayEvent", new { "@onclick" = "AllDayEvent_Checked();" })
于 2013-06-24T12:40:02.717 に答える