2011-01-13 96 views
4

我有一个复选框,需要检查它才能提交表单。如何禁用jQuery提交按钮?

所以我将提交按钮禁用属性设置为“禁用”。然后我尝试将复选框绑定到它,所以它会启用/禁用提交按钮。它不起作用:

$('input[type=checkbox]#confirm').click(function() { 
    if ($(this).is(':checked')) { 
     $('#submitButton').removeAttr('disabled'); 
    } else { 
     $('#submitButton').attr('disabled', 'disabled'); 
    } 
}); 

提交按钮保持禁用状态。

HTML:

<form enctype="application/x-www-form-urlencoded" method="post" action="/controller/action"><dl class="zend_form"> 
<dd id="confirm-element"> 
<input type="hidden" name="confirm" value="0"><input type="checkbox" name="confirm" id="confirm" value="1" class="input-checkbox"></dd> 
<dt id="confirm-label"><label for="confirm" class="required">Lorem ipsum.</label></dt> 
<dt id="submitButton-label">&#160;</dt><dd id="submitButton-element"> 
<input type="submit" name="submitButton" id="submitButton" value="Potvrdiť" class="input-submit" disabled="disabled"></dd> 

<input type="hidden" name="csrf_token" value="ed3e9347145a3eb3d58c4c21d813df26" id=""></dl></form> 
+0

将提交按钮设置为禁用可能不够。考虑防止表单的默认提交事件(在某些浏览器中按输入简单的输入文本框也会提交表单)。 – kapa 2011-01-13 07:51:08

+0

@bazmegakapa不需要。如果有人试图绕过javascript,我已经在服务器端确保安全。我只需要使其在视觉上可见即表格只能在检查复选框输入后才能提交。 – 2011-01-13 07:52:47

回答

1

尝试

$('#confirm').change(function() { 
    $('#submitButton').attr('disabled', !this.checked); 
}); 

accordi下面的评论,现在这应该解决你的问题。

$('#confirm').change(function() { 
    $('#submitButton').button("option", "disabled", !this.checked); 
}); 
0
$("#submitButton").attr("disabled", true); 
+1

这是如何解决我的问题? – 2011-01-13 07:53:04

+0

对不起。我误解了你的问题。 – 2011-01-13 15:05:21

0

您可以禁用按键,但你仍然有按钮的点击,所以你必须unbind从按钮的Click事件:

$("#submitButton").attr('disabled', 'disabled').unbind('click');