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をリッスンできます。プラグインで何が起こっているのかはよくわかりませんが、トリガーによってのみ起動される変更イベントをリッスンするのはちょっとファンキーなようです（元のチェックボックスが非表示になっていない場合を除く）。

于 2012-05-18T05:09:48.170 に答える
0

このプラグインは、チェックボックスを要素にまたがるように変更し、実際のチェックボックス自体を非表示にします。したがって、それらをクリックしても何も起こりません。span要素にはonchangeイベントがないため、changeイベントをこれらにバインドすることはできません。

ただし、スパン要素にはクリックイベントがあります。つまり、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 に答える