Question

我的表单中有很多输入字段，每个字段都会将序列化表单数据发送到服务器。

现在我需要阻止选择一些复选框（不能使用"disabled"属性，单击这些复选框时必须触发alert()。

我尝试绑定到click()事件，但看起来change()事件在click()之前被触发，并且序列化数据被发送，就像选中了复选框一样。

现在我正在尝试使用mousedown()事件，但prop('checked', false)似乎不起作用，实际上效果相反 - 复选框最终会被检查。

这是JsFiddle测试用例 - http://jsfiddle.net/F8x2X/19/

那么如何在change()事件之前取消选中复选框？

Answer 1

您可以在不应检查的复选框上放置一个类，并检查更改事件

Foo: <input type="checkbox" name="foo" class='notcheck' value="1" /><br/>

<div id="result"></div>

$(':input').change(function(e){
    if($(this).hasClass('notcheck')){
       alert('you can\'t check this   !');
        $(this).removeProp('checked');
       return;

    }
    var data = $(':input').serialize();
    var checked = '';

    if ($(this).is(':checked')) {
        checked = 'Yes';
    } else {
        checked = 'No';
    }

    $('#result').append('Checked: ' + checked + '; Serialized: ' + data + '<br/>');
});

在这里摆弄 http://jsfiddle.net/nicolapeluchetti/F8x2X/20/

Answer 2

您还可以使用confirm与用户确认他们是否要取消选择复选框，例如：

$('input.record_age').on('change', function(e) {
  $this = $(this);
  if(!$this.prop('checked')) { // only when unchecked
    confirmed = confirm("Are you sure you want to stop recording age?");
    if(!confirmed) { $this.prop('checked', true) } // if they press Cancel, change back to checked, otherwise leave as is.
  }

Answer 3

不确定我是否得到了这个问题，但问题是：FIDDLE

var data = $(':input').prop('checked', false).serialize();

如何在触发change（）事件之前取消选中复选框

3 个答案: