使用.change（）函数在复选框更改时自动提交表单？

Question

这是一个很长的问题，所以请让我忍受。

勾选复选框后，我需要自动提交表单。 到目前为止，我已经在下面的代码， 它可以完美地工作 。 选中或未选中复选框时，必须提交表单。 有一些PHP读取数据库条目并在加载时显示适当的状态（选中或未选中）。

<form method="post" id="edituser" class="user-forms" action="--some php here--">
    <input class="lesson" value="l101" name="flesson" type="checkbox" />
</form>
<script>
    $('.lesson').change(function() {
        $('.user-forms').submit(); 
    });
</script>

但是，当我引入一个精美的复选框脚本时，该脚本将复选框变成滑块。 复选框jQuery脚本如下：

<script src="'.get_bloginfo('stylesheet_directory').'/jquery/checkboxes.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("input[type=checkbox]").tzCheckbox({labels:["Enable","Disable"]});
    });
</script>

上面调用的checkboxes.js的内容如下：

(function($){
$.fn.tzCheckbox = function(options){

    // Default On / Off labels:

    options = $.extend({
        labels : ['ON','OFF']
    },options);

    return this.each(function(){
        var originalCheckBox = $(this),
            labels = [];

        // Checking for the data-on / data-off HTML5 data attributes:
        if(originalCheckBox.data('on')){
            labels[0] = originalCheckBox.data('on');
            labels[1] = originalCheckBox.data('off');
        }
        else labels = options.labels;

        // Creating the new checkbox markup:
        var checkBox = $('<span>',{
            className   : 'tzCheckBox '+(this.checked?'checked':''),
            html:   '<span class="tzCBContent">'+labels[this.checked?0:1]+
                    '</span><span class="tzCBPart"></span>'
        });

        // Inserting the new checkbox, and hiding the original:
        checkBox.insertAfter(originalCheckBox.hide());

        checkBox.click(function(){
            checkBox.toggleClass('checked');

            var isChecked = checkBox.hasClass('checked');

            // Synchronizing the original checkbox:
            originalCheckBox.attr('checked',isChecked);
            checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
        });

        // Listening for changes on the original and affecting the new one:
        originalCheckBox.bind('change',function(){
            checkBox.click();
        });
    });
};
})(jQuery);

该脚本还附带了一些CSS，但由于它并不重要，所以我将其省略。

最后，这是jQuery脚本对复选框的作用：

<input id="on_off_on" class="lesson" value="lesson11-1" name="forexadvanced[]" type="checkbox" style="display: none; ">
<span classname="tzCheckBox checked" class=""><span class="tzCBContent">Disable</span><span class="tzCBPart"></span></span>

将复选框更改为滑块时，.change（）函数不再检测到复选框状态的变化。

如何使.change（）函数起作用，或者它们是我可以使用的替代函数？

Answer 1

听这样的变化：

 $('.lesson').bind("tzCheckboxChange",function() {
      $('.user-forms').submit(); 
 });

通过添加以下行来修改插件：

 $(originalCheckBox).trigger("tzCheckboxChange");

后

 checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);

这样，无论何时使用此插件，您都可以监听tzCheckboxChange而不是change 。
我真的不知道插件发生了什么，但是当它只能通过触发器触发时（除非它不会隐藏原始的复选框），它监听更改事件似乎有点时髦。

Answer 2

该插件更改您的复选框以跨越元素，并隐藏实际的复选框本身。 因此，当您单击它们时，什么也不会发生。 由于span元素没有onchange事件，因此无法将change事件绑定到这些事件。

但是，span元素确实具有click事件，这意味着您可以使用Firebug或Chrome Debugger找到要绑定的正确元素，从而将click事件绑定到生成的span。

然后，您的点击处理程序可以执行与未使用插件时通常发生的更改事件相同的操作。

这是一个例子：

HTML（来源）：

<!-- This is a checkbox BEFORE running the code that transforms the checkboxes 
   into sliders -->
<li>
    <label for="pelda1">Opció 1:</label>
    <input class="pelda" type="checkbox" id="pelda1" name="pelda1" />
</li>

HTML（从Chrome调试器生成）：

注意：这是在运行将复选框转换为滑块的JavaScript后生成的HTML！ 生成此代码后，必须绑定单击事件。

<li>
    <label for="pelda1">Option 1:</label>

    <!-- The hidden checkbox -->
    <input class="pelda" type="checkbox" id="pelda1" name="pelda1" style="display: none; " />

    <!-- the "checked" class on the span gets changed when you toggle the slider 
         if it's there, then it's checked. This is what you're users are actually
         changing. 
    -->
    <span class="tzCheckBox checked">
        <span class="tzCBContent">active</span>
        <span class="tzCBPart"></span>
    </span>
</li>

JavaScript：

注意：在将复选框转换为滑块之后，必须将其绑定。 如果您以前尝试过，则HTML在DOM中将不存在！

$('.tzCheckBox').click(function() {

    // alert the value of the hidden checkbox
    alert( $('#pelda1').attr("checked") );

    // submit your form here
});