JQuery Plug-in : Disable-Enable, Visible-Invisible Element


Beberapa bulan terakhir ini saya banyak bekerja dengan JavaScript dan JQuery untuk mengembangkan sebuah modul sistem. Sistem ini berbasis web menggunakan PHP dan dibantu dengan JQuery untuk fungsionalitas tampilannya. Suatu ketika saya membutuhkan sebuah fungsi yang digunakan untuk melakukan disable dan enable button atau input text, dan fungsi untuk melakukan setting visibility sebuah element. Googling kesana-kemari tidak menemukan solusi, akhirnya yang saya dapat adalah bagaiman membuat sebuah plug-in sendiri sesuai dengan kebutuhan kita. Yang saya buat adalah plug-in untuk melakukan enable-disable element dan mengatur visibility nya.

Berikut adalah plug-in untuk  yang saya buat:

//untuk men-disable element
jQuery.fn.disable = function() {
     if (this != null){
          if(this.attr('disabled') == false)
              this.attr('disabled', true);
     }
} 

//untuk meng-enable element
jQuery.fn.enable = function() {
     if (this != null){
          if (this.attr('disabled') == true)
               this.attr('disabled', false);
     }
}

// gabungan, jika elemenet tersebut disable, maka di-enable dan
// jika dia enable, maka akan di-disable
jQuery.fn.tenable = function() {
        if (this != null){
                if(this.attr('disabled') == false)
                       this.attr('disabled', true);
                else
                       this.attr('disabled', false);
       }
} 

Yang kedua yang saya buat adalah plug-in untuk melakukan setting visibility dari element menggunakan CSS. Berikut plug-in nya:
 

//untuk meng-invisible-kan element
jQuery.fn.invisible = function() {
     if (this != null){
          if (this.css('visibility') == 'visible')
               this.css('visibility', 'hidden');
      }
}

// untuk mem-visible-kan element
jQuery.fn.visible = function() {
     if (this != null){
          if (this.css('visibility') == 'hidden')
               this.css('visibility', 'visible');
     }
}

// gabungan, jika elemenet tersebut invisible, maka di-visible dan
// jika dia visible, maka akan di-invisiblekan
jQuery.fn.tvisible = function() {
        if(this != null){
               if(this.css('visibility') == 'visible')
                       this.css('visibility', 'hidden');
               else
                       this.css('visibility', 'visible');
         }
}

Cara memakainya sangat mudah sekali, cukup memanggilnya seperti fungsi yang sudah ada di JQuery. Contohnya:

$('#a').click(function(){
      $('#b').disable();
      $('#c').enable();
      $('#d').tenable();
      $('#e').invisible();
      $('#f').visible();
      $('#g').tvisible();
});

Ok. Itulah plug-in yang sangat membantu saya mengerjakan pekerjaan saya. Semoga berguna bagi Anda juga…:)

3 thoughts on “JQuery Plug-in : Disable-Enable, Visible-Invisible Element

  1. aratyas

    salam kenal,,
    maaf, saya mau tanya, ketika sayang pake script diatas, koq hasilnya keluar kyak gini ya pesan error nya :
    ” Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in C:\xampplite\htdocs\bismillah\coba\testhide.php on line 67″

    yang terletak pada baris ini :

    mohon bantuanya ya…
    saya sedang membutuhkan code disable dan enable untuk tombol on off saya… terimkasih,,, mohon bantuanyaa,,,,

    Reply
  2. aratyas

    67. $(‘#a’). click (function(){
    68. $(‘#b’).disable();
    68. $(‘#c’).enable();
    69. $(‘#d’).tenable();
    70. $(‘#e’).invisible();
    $(‘#f’).visible();
    $(‘#g’).tvisible();
    });
    ?>

    mohon bantuanya ya…
    saya sedang membutuhkan code disable dan enable untuk tombol on off saya… terimkasih,,, mohon bantuanyaa,,,,

    Reply
  3. Daniel Susanto Post author

    sebelumnya saya mau tanya, versi JQuery yang kamu pakai versi berapa ya? coba sesuaikan dengan versi JQuery yang kamu pakai untuk bind method click di button nya, analisa saya seperti itu, kemudian jangan lupa untuk menempatkan code JQuery di dalam block $(document).ready(function(){…});

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s