如何防止回复jquery ui复选框..？

Question

我使用过jquery ui复选框。最终生成下面的按钮 ，如下面的代码所示。

＆＃13;

＆＃13;

(function($) {

  $.widget("app.checkbox", {

    _create: function() {

      // Call the default widget constructor first.            
      this._super();

      // Hide the HTML checkbox, then insert our button.
      this.element.addClass("ui-helper-hidden-accessible");
      this.button = $("<button/>").insertAfter(this.element);

      // Configure the button by adding our widget class,
      // setting some default text, default icons, and such.
      // The create event handler removes the title attribute,
      // because we don't need it.
      this.button.addClass("ui-checkbox")
        .text("checkbox")
        .button({
          text: false,
          icons: {
            primary: "ui-icon-blank"
          },
          create: function(e, ui) {
            $(this).removeAttr("title");
          }
        });

      // Listen for click events on the button we just inserted and
      // toggle the checked state of our hidden checkbox.
      this._on(this.button, {
        click: function(e) {
          this.element.prop("checked", !this.element.is(":checked"));
          this.refresh();
        }
      });

      // Update the checked state of the button, depending on the
      // initial checked state of the checkbox.
      this.refresh();

    },

    _destroy: function() {

      // Standard widget cleanup.
      this._super();

      // Display the HTML checkbox and remove the button.
      this.element.removeClass("ui-helper-hidden-accessible");
      this.button.button("destroy").remove();

    },

    refresh: function() {
      // Set the button icon based on the state of the checkbox.
      this.button.button("option", "icons", {
        primary: this.element.is(":checked") ?
          "ui-icon-check" : "ui-icon-blank"
      });

    }

  });

  // Create three checkbox instances.
  $(function() {
    $("input[type='checkbox']").checkbox();
  });

})(jQuery);

＆＃13;

body {
  font-size: 0.8em;
}
/* Specific checkbox widget styles */

.ui-checkbox {
  font-size: 0.75em;
  margin: 0.6em;
}

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div>
  <input id="sm" type="checkbox" />
  <label for="check" class="ui-widget">Small</label>
</div>
<div>
  <input id="md" type="checkbox" />
  <label for="check" class="ui-widget">Medium</label>
</div>
<div>
  <input id="lg" type="checkbox" />
  <label for="check" class="ui-widget">Large</label>
</div>

＆＃13;

＆＃13;

＆＃13;

请参阅以下链接以查看复选框：

http://jsfiddle.net/adamboduch/b2GPv/

我在我的应用程序中使用了相同的代码，有人建议如何在单击复选框时阻止回发。

Answer 1

我添加了type="button"，这有帮助。现在工作正常。