使用jQuery测试是否选中复选框

我的表单元素由Rails生成

<input id="agree_to_rules" name="agree_to_rules" type="checkbox" value="1">

---

问题是，当按钮处于活动状态时，在有人选中该框后，按钮的jquery ui悬停状态不再生效。有人知道为什么吗？

复选框的值并不意味着它已被选中

html属性为：

checked="checked"

不是

请参见此示例：

<input type="checkbox" />
<input type="checkbox" checked="checked" />

该值是将在表单中发布的值。

请尝试：

 if ($('#agree_to_rules').checked) { ...

---

您需要将代码放置在类似

.change（）

的处理程序中，并传递布尔值

true/false

，而不是字符串

$(function() {
    $('#agree_to_rules').change(function() {
        if (this.checked) {
            $('#tweet_your_entry').attr('disabled', false).css({
                color: '#666666'
            });
        } else {
            $('#tweet_your_entry').attr('disabled', true).css({
                color: '#f5f5f5'
            });
        }
    });
});

工作示例：

现在，每次复选框更改时，代码都将运行

如果您只希望在页面加载时运行它，那么请去掉更改处理程序，但再次确保传递

true

和

false

，而不是

“true”

和

“false”

---

这里有一个更简洁的写作方法

$(function() {
    $('#agree_to_rules').change(function() {
        $('#tweet_your_entry').attr('disabled', this.checked)
            .css({ color: this.checked ? '#666666' : '#f5f5f5' });
    });
});

工作示例：

---

编辑：

根据提供的小提琴，我认为这是一个更干净的解决方案：

$(function() {
    $("button, input:submit, a", ".actions").button();
    $('#agree_to_rules').change(function() {
        $('#tweet_your_entry')
            .attr('disabled', !this.checked)
            .toggleClass('ui-button-disabled ui-state-disabled', !this.checked);

    }).change();
});

示例：

jQueryUI

似乎存在一些问题，如果页面加载时按钮被禁用，其

悬停

功能将永远无法启用

---

我从HTML中删除了

disabled=“disabled”

，并在页面加载时简单地触发了

.change（）

，这将看到该框未被选中，因此在应用jQueryUI后禁用该按钮。

以上答案是正确的。但是您不能更改复选框的“颜色”，勾号不是文本

$('#agree_to_rules').change(function(){
    if( $('#agree_to_rules')[0].checked ) alert("check");
});

---

我使用的是1.6，所以我不确定它是否有效——无论如何，它所做的只是将复选框的值设置为checked，而不是评估它是否被“选中”。这是另一个问题的答案，而不是被问到的问题。不，我要指出的是，原始问题中生成的值=“1”并不等同于被选中的复选框。这是不正确的。不，正如我所说，您发布的代码将复选框设置为默认为选中。这是每次单击复选框时都触发的if语句，还是仅在页面加载时才触发？我经常使用.is（“：checked”），并且可以保证它按照您希望的方式工作。不要从DOM中重新选择

#agree_to_rules

，您应该利用

此

将引用您的元素这一事实。因此，如果（this.checked），则改为执行

if{…

因为它效率更高。

.checked

不是jQuery对象可用的属性。您需要提取DOM元素才能使用该属性。：o）谢谢，我没有任何jQuery测试台可以尝试任何代码，我只是在谷歌上搜索了一下，这似乎是一个合乎逻辑的答案。为了更好地理解，有没有办法若要直接从jQuery对象（例如指向它的属性值）提取DOM元素，jQuery对象将引用通过索引匹配的DOM元素。因为jQuery对象是典型的JavaScript对象，您可以使用方括号

[]

访问其属性，因此您可以执行

$（“#同意规则”）[0].checked

.jQuery还提供了一种方法来提取名为

.get（）

，因此

$（“#同意规则”）.get（0）。checked

。如果复选框的初始状态设置为“checked”，则更改将不起作用。谢谢，我刚想发布这个，我发现了。但有一件事我现在遇到了麻烦，那就是按钮的jqeury ui悬停状态。在jQuery将禁用状态更改为false后，它不再生效。我将根据您的示例发布我现在使用的代码示例。@rkaregaran:如果您是说该事件不起作用，当然会。如果你的意思是它不会设置初始值，那么就不会了。我不知道这是不是有意的。要做到这一点，你只需将

.change（）

链接到最后。@Final Draft:如果你禁用表单元素，它将不再注册任何事件。@Final Draft:这里，我喜欢一点。它使用

.toggleClass（）

带有第二个参数，该参数是一个开关，用于指示类的

添加/删除

。如果未选中该框，按钮将被禁用，类将被添加。如果仔细阅读代码，您将看到它正在更改按钮的颜色，而不是复选框。我的错误是，我没有看到未列出的标记；）但是是的，我应该注意到不匹配的ID

$(function() {
    $('#agree_to_rules').change(function() {
        $('#tweet_your_entry').attr('disabled', this.checked)
            .css({ color: this.checked ? '#666666' : '#f5f5f5' });
    });
});

$(function() {
    $("button, input:submit, a", ".actions").button();
    $('#agree_to_rules').change(function() {
        $('#tweet_your_entry')
            .attr('disabled', !this.checked)
            .toggleClass('ui-button-disabled ui-state-disabled', !this.checked);

    }).change();
});

$('#agree_to_rules').change(function(){
    if( $('#agree_to_rules')[0].checked ) alert("check");
});