2014-11-17 3 views
0

Я использовал фразу jquery ui. который в итоге генерирует кнопку ниже , как показано в приведенном ниже коде.Как предотвратить пост на jquery ui checkbox ..?

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

я использовал один и тот же код в моем приложении, может кто-то подскажет, как я могу предотвратить пост назад при щелчке по галочке.

+0

нет ничего похожего на 'runat = server', поэтому он не будет возвращаться –

+0

На самом деле я разработчик пользовательского интерфейса и помогаю разработчику ASP.net интегрировать код. Итак, он говорит, что на моей странице с галочкой появляется сообщение назад. –

+0

@nakulbhatt, убедитесь, что интеграция разработчиков не использует свойство 'autopostback = true' и не использует' runat = server'. –

ответ

0

Я добавил type="button", и это помогло. Сейчас он работает нормально.

Смежные вопросы