0

这是一个有点长的问题，所以请大家多多包涵。

勾选复选框时，我需要自动提交表单。到目前为止，我有下面的代码，它工作得很好。当复选框被选中或未选中时，表单必须提交。有一些 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() 函数工作，或者它们是我可以使用的替代函数？

4

2 回答 2

0

听这样的变化：

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

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

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

后

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

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

于 2012-05-18T05:09:48.170 回答
0

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

然而，span 元素确实有点击事件，这意味着您可以改为将点击事件绑定到生成的 span，使用 Firebug 或 Chrome 调试器来定位要绑定到的正确元素。

然后，如果未使用插件，您的单击处理程序可以执行更改事件通常会执行的相同操作。

这是一个例子：

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
});
于 2012-05-18T05:16:08.847 回答