使用JQuery在一个条件为真时启用下拉列表

本文关键字：条件 下拉列表 启用 一个 JQuery 使用 | 更新日期: 2023-09-27 18:16:37

我正在做一个MVC c#项目。我是JQuery的新手，如果你们能给我一些建议，告诉我哪里出了问题，我会很高兴的。

有两个下拉列表:

            @Html.DropDownList("year", new SelectList(SomeModel.SomeHelper.SomeMethod()), "All", new {@class = "dropDown"})
            @Html.DropDownList("month", new SelectList(new[]
            {
                new {ID = "1", Name = "January"},
                new {ID = "2", Name = "February"},

            }, "ID", "Name"),"All", new {@class = "dropDown", @disabled = "disabled"})

注意:大多数月份是故意删除的

年份列表将始终启用。但是，只有在从年份列表中选择值时才启用月份列表。因此，我编写了这个JQuery，它工作得很好:

$(document).ready(function ()
{
    var yearDropdown = $("#year");
    var monthDropdown = $("#month");
   yearDropdown.on('change', function (sender, arg) {
        var newVal = $(this).val();
        monthDropdown.removeAttr('disabled', newVal !== 0);
    }); 
});
然而,

现在. .当我不想选择年份时(我回到在年份列表中选择'all')，月份列表仍然启用。

EDIT:年份列表包含像"2010"，"2011" ..等。当"all"被选为年份列表时，我希望禁用月份列表。当选择年份时，我希望启用月份列表

所以我这样写:

$(document).ready(function () {
        var monthDropdown = $("#month");
        var yearDropdown = $("#year");
        yearDropdown.on('change', function (sender, arg) {
            if ($(yearDropdown) == "All") {
                $("#monthDropdown").prop("disabled", false);
            }
        });
    });

没有工作…(这意味着什么都没发生)我甚至不确定这是不是正确的方法。因此，到目前为止:只有从年份列表中选择年份才能启用月份列表。只不过. .

指导吗?:)

更新:

在所有评论者的指导下，我终于成功地编写了一个jquery:

$(document).ready(function () {
        var yearDropdown = $("#year");
        var monthDropdown = $("#month");
        yearDropdown.on('change', function() {
            var newVal = $("#year").val();
            if (newVal === "") {
                monthDropdown.prop('disabled', !this.selectedIndex);
            }
            else {
                monthDropdown.prop('enabled', !this.selectedIndex);
            }
        });
    });

现在我对jquery有了更好的理解:)虽然我把一个答案标记为答案，但评论真的很重要!

使用JQuery在一个条件为真时启用下拉列表

使用$(yearDropdown)，您可以获得jQuery元素(DOM元素的包装器)。

使用$(yearDropdown).val()获取实际值!

使用.prop() 

monthDropdown.prop('disabled', newVal != 0);

，你必须检查值:

yearDropdown.on('change', function (sender, arg) {
    if (yearDropdown.val() == "All") { // use `.val()` to check the value
        $("#monthDropdown").prop("disabled", false);
    }
});

或

yearDropdown.on('change', function (sender, arg) {
    $("#monthDropdown").prop("disabled", this.value == "All");
});
相关文章：