2

チェックボックスがあるフォームウィザードがあります。ブートストラップ スイッチを使用してトグル ボタンをユーザーに表示しています。ユーザーがボタンをクリックするたびに、YES または NO (チェック/チェック解除) が表示されます。ただし、次のいずれかを実行しない限り、クリック イベントは機能しません。

  1. ウィザードを削除すると、ブートストラップ スイッチ ボタンが期待どおりに機能します。

  2. ブートストラップ スイッチ コードにコメントを付けます

    $("[type='checkbox']").bootstrapSwitch();

  3. デリゲートを使用してクリック イベントを追加する

    $('#UserForm').on('click', '#checkbox1', function () { console.log('you click me'); });

$(document).ready(function() {
  //  $("[type='checkbox']").bootstrapSwitch();
  //comment out the above line code.
});

var form = $("#UserForm").show();

form.steps({
  headerTag: "h3",
  bodyTag: "fieldset",
  transitionEffect: "slideLeft",
  onStepChanging: function(event, currentIndex, newIndex) {
    // Allways allow previous action even if the current form is not valid!
    if (currentIndex > newIndex) {
      return true;
    }
    // Forbid next action on "Warning" step if the user is to young
    if (newIndex === 3 && Number($("#age-2").val()) < 18) {
      return false;
    }
    // Needed in some cases if the user went back (clean up)
    if (currentIndex < newIndex) {
      // To remove error styles
      form.find(".body:eq(" + newIndex + ") label.error").remove();
      form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
    }
    form.validate().settings.ignore = ":disabled,:hidden";
    /// return form.valid();
    return ValidForm(this, currentIndex);
  },
  onStepChanged: function(event, currentIndex, priorIndex) {
    // Used to skip the "Warning" step if the user is old enough.
    if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
      form.steps("next");
    }
    // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
    if (currentIndex === 2 && priorIndex === 3) {
      form.steps("previous");
    }
  },
  onFinishing: function(event, currentIndex) {
    return ValidForm(this, currentIndex);
    //  return form.valid();
  },
  onFinished: function(event, currentIndex) {
    submitForm();
  }
}).validate({
  errorPlacement: function errorPlacement(error, element) {
    element.before(error);
  },
  rules: {
    confirm: {
      equalTo: "#password-2"
    }
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate">
  <h3>User</h3>
  <fieldset>
    <input type="checkbox" id="checkbox1" name="checkbox1" />
  </fieldset>
</form>

2016 年 3 月 22 日更新

以下のコードを削除すると、問題なくクリック イベントが発生します。

$("[type='checkbox']").bootstrapSwitch();
4

1 に答える 1

4

わかりました最後に私はいくつかの解決策を得ました。

それ以外の

$('#UserForm').on('click', '#checkbox1', function () { console.log('you click me'); });

このコードを追加すると、変更されたときにイベントが発生します。

$('#checkbox1').on('switchChange.bootstrapSwitch', function (e, state) {

            if(state){
                        alert("Checked");
                        // Your Code Here

            }else{
                        alert("Not Checked");
                        // Your Code Here

            }

        });

または私のHTML全体をチェックしてください

<!Doctype html>
<html>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate">
        <h3>User</h3>
        <fieldset>
            <input type="checkbox" id="checkbox1" name="checkbox1" />
        </fieldset>
    </form>

    <script>
        $(document).ready(function() {
            $("[type='checkbox']").bootstrapSwitch();
            //comment out the above line code.
        });

        var form = $("#UserForm").show();

        form.steps({
            headerTag: "h3",
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",
            onStepChanging: function(event, currentIndex, newIndex) {
                // Allways allow previous action even if the current form is not valid!
                if (currentIndex > newIndex) {
                    return true;
                }
                // Forbid next action on "Warning" step if the user is to young
                if (newIndex === 3 && Number($("#age-2").val()) < 18) {
                    return false;
                }
                // Needed in some cases if the user went back (clean up)
                if (currentIndex < newIndex) {
                    // To remove error styles
                    form.find(".body:eq(" + newIndex + ") label.error").remove();
                    form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                }
                form.validate().settings.ignore = ":disabled,:hidden";
                /// return form.valid();
                return ValidForm(this, currentIndex);
            },
            onStepChanged: function(event, currentIndex, priorIndex) {
                // Used to skip the "Warning" step if the user is old enough.
                if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
                    form.steps("next");
                }
                // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
                if (currentIndex === 2 && priorIndex === 3) {
                    form.steps("previous");
                }
            },
            onFinishing: function(event, currentIndex) {
                return ValidForm(this, currentIndex);
                //  return form.valid();
            },
            onFinished: function(event, currentIndex) {
                submitForm();
            }
        }).validate({
            errorPlacement: function errorPlacement(error, element) {
                element.before(error);
            },
            rules: {
                confirm: {
                    equalTo: "#password-2"
                }
            }
        });

        $('#checkbox1').on('switchChange.bootstrapSwitch', function (e, state) {

            if(state){
                        alert("Checked");
                        // Your Code Here

            }else{
                        alert("Not Checked");
                        // Your Code Here

            }

        });

    </script>
</html>
于 2016-03-25T04:49:30.010 に答える