使用类选择器处理复选框答案

【问题标题】：handle checkbox with class selector使用类选择器处理复选框
【发布时间】：2011-05-24 19:38:29
【问题描述】：

我有一个<asp:Checkbox />，我想看看它是否通过 jQuery 进行了检查。问题是，它总是返回 false。这是否与我通过类选择元素的事实有关？

$(document).ready(initialize);

var map;

function initialize() {

    var x;
    x = $(".chkSetMap");
    x.click(setMap);
}

function setMap() {

    if ($('.chkSetMap').attr('checked') == true) {
        $(".comboMap").attr("disabled", true);

    }
}

复选框

    <asp:CheckBox ID="chkSetMap" CssClass="chkSetMap" runat="server" />

呈现的复选框

<span class="chkSetMap"><input id="ctl00_ContentPlaceHolder1_chkSetMap" type="checkbox" name="ctl00$ContentPlaceHolder1$chkSetMap" /></span>

【问题讨论】：

标签： jquery asp.net webforms

【解决方案1】：

尝试使用.is() 方法和:checked 速记选择器

$(document).ready(initialize);

var $chkSetMap;

function initialize() {
    $chkSetMap = $(".chkSetMap input:checkbox").click(setMap);
}

function setMap() {
    $(".comboMap").attr("disabled", $chkSetMap.is(':checked'));
}

工作示例：http://jsfiddle.net/hunter/5XA7D/ 已更新！

由于 ASP.Net 服务器控件非常棒，它会将您的复选框包装在 span 中。 span 有 chkSetMap 类，而不是复选框。

【讨论】：

@Chad 它在 DOM 上，它确实像那样工作。它没有将属性设置为字符串，而是将其设置为布尔值
一句简单的“是的，你误会了”就足够了。
@Chad 是的，你误会了。您可以分别将“禁用”显式设置为 true 或 false。也适用于复选框选中状态。你想到的是attr("disabled", "disabled")或removeAttr("disabled")
@Jorge 请参阅我的回答中的示例
@Chad - 不用担心，我不是故意冒犯，但我还是在写那个例子。

【解决方案2】：

ASP.NET 将CssClass 放在<span> 上（这是任何Text 所在的位置）。因此，您的选择器会选择 <span>。

尝试使用child selector 进入复选框：$('.chkSetMap > input:checkbox')

【讨论】：

【解决方案3】：

您可以简单地拥有一个匿名函数。（#content 是 wjhatever div 是您页面上的 div，其中包含您要查找的所有输入）。如果选中 chkSetMap 的任何复选框，此功能将禁用 .comboMap 类的所有下拉菜单。如果您只有 1 个复选框和一个选择 - 请改用 ID

$(document).ready(function() {

$(function() {
    $('.chkSetMap').click(function() {
        if ($(this).is(':checked')) {
            $("#content").find('.comboMap').attr("disabled", true);
        }else{
        $("#content").find('.comboMap').attr("disabled", false);
        }
    });

});
});

【讨论】：