switch_btn.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /**
  2. * 选择开关
  3. *
  4. * @author CaiAoLin
  5. * @date 2017/10/23
  6. * @version
  7. */
  8. (function($){
  9. $.fn.switchBtn = function(options){
  10. var defaults = {
  11. enableText: '开启',
  12. disableText: '禁止',
  13. };
  14. var opts = $.extend(defaults, options);
  15. var switchBtn = $(this);
  16. var status = switchBtn.data('status');
  17. status = parseInt(status);
  18. status = isNaN(status) ? 0 : status;
  19. var name = switchBtn.data('name');
  20. name = name === '' || name === undefined ? 'switch_btn' : name;
  21. var html = '';
  22. var inputHtml = '<input type="hidden" name="'+ name +'" value="'+ status +'" />';
  23. if (status > 0) {
  24. html += '<button class="btn btn-success btn-sm disabled="disabled">已'+ opts.enableText +'</button>' + inputHtml +
  25. '<button class="btn btn-outline-danger btn-sm">'+ opts.disableText +'</button>';
  26. } else {
  27. html += '<button class="btn btn-outline-success btn-sm">'+ opts.enableText +'</button>' + inputHtml +
  28. '<button class="btn btn-danger btn-sm disabled" disabled="disabled">已'+ opts.disableText +'</button>';
  29. }
  30. switchBtn.append(html);
  31. // 点击事件绑定
  32. switchBtn.on('click', 'button', function() {
  33. var currentStatus = $("input[name='"+ name +"']").val();
  34. if (currentStatus > 0) {
  35. // 切换为false的状态
  36. $(this).siblings("button").removeClass("btn-success").removeClass("disabled")
  37. .addClass("btn-outline-success").removeAttr("disabled").text(opts.enableText);
  38. $(this).removeClass("btn-outline-danger").addClass("btn-danger").attr("disabled", "disabled")
  39. .text("已" + opts.disableText);
  40. $("input[name='"+ name +"']").val(0);
  41. switchBtn.attr("data-status", 0);
  42. } else {
  43. // 切换为true的状态
  44. $(this).removeClass("btn-outline-success").addClass("btn-success").addClass("disabled")
  45. .attr("disabled", "disabled").text("已" + opts.enableText);
  46. $(this).siblings("button").removeClass("btn-danger").removeClass("disabled")
  47. .addClass("btn-outline-danger").removeAttr("disabled").text(opts.disableText);
  48. $("input[name='"+ name +"']").val(1);
  49. switchBtn.attr("data-status", 1);
  50. }
  51. });
  52. };
  53. })(jQuery);