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

Posted 2023-05-08

【中文标题】如何防止在 jquery ui 复选框上回发 ..？

【英文标题】：How to prevent post back on jquery ui checkbox ..?

【发布时间】：2015-01-14 12:08:05

【问题描述】：

我使用了 jquery ui 复选框。最终在下方生成按钮 , 如下代码所示。

(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);

body 
  font-size: 0.8em;

/* Specific checkbox widget styles */

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

<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>

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

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

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

【问题讨论】：

没有像runat=server 这样的东西，所以它不会回发

其实我是一名 UI 开发人员，帮助 ASP.net 开发人员集成代码。所以，他说我的复选框点击页面正在回复..

@nakulbhatt，确保集成开发者不要使用autopostback=true属性，不要使用runat=server。

【参考方案1】：

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