Question

我的表单元素由Rails生成。

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

我正在尝试根据是否选中复选框来设置表单上的提交按钮的状态。（我知道内联css不是很好，我只是想在测试时获得视觉提示。

<script>
$(function() {

  if ($('#agree_to_rules').is(':checked')) {
          $('#tweet_your_entry').attr('disabled', 'false').css({color: '#666666'});
              } else {
          $('#tweet_your_entry').attr('disabled', 'true').css({color: '#f5f5f5'});
        }
});
</script>

无论复选框的状态如何，它似乎总是评估为false。有人发现错误吗？或者可以指出一种更简洁的方法来实现相同的结果 - 我是JS和jQuery的新手。

更新

以下是我现在正在使用的内容，基于以下答案：

<script>
$(function() {
  $('#agree_to_rules').change(function() {
  if ( $('#agree_to_rules').prop("checked") ) {
          $('#tweet_your_entry').attr('disabled', 'false').removeClass('ui-button-disabled ui-state-disabled');
              } else {
          $('#tweet_your_entry').attr('disabled', 'true').addClass('ui-button-disabled ui-state-disabled');
        }
    });
});
</script>

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

Answer 1

您需要将代码放在.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'
            });
        }
    });
});

工作示例： http://jsfiddle.net/CPFns/

现在每次复选框更改时代码都会运行。

如果您只想在页面加载时运行它，那么请删除更改处理程序，但请务必再次通过true和false而不是"true"和{{ 1}}。

这是一种更简洁的写作方式。

"false"

工作示例： http://jsfiddle.net/CPFns/1/

修改

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

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

示例： http://jsfiddle.net/psBQ7/2/

$(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，则永远不会启用hover功能。

我从HTML中删除了disabled，只是在页面加载时触发了disabled="disabled"，这样就会看到未选中该框，因此在 >已经应用了jQueryUI。

Answer 2

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

html属性为：

checked="checked"

不

value="1"

见这个例子：

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

该值将以表格形式发布。

Answer 3

尝试：

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

Answer 4

以上答案是正确的。但是你不能改变复选框的“颜色”，刻度标记不是文本。

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

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

更新

4 个答案: