Cara Menggunakan Disabled dan Enabled Selector dalam JQuery ~ Nyintak

Kali ini saya akan menjelaskan cara penggunaan Disabled dan Enabled Selector dalam JQuery. Disabled Selector digunakan untuk memilih elemen yang mempunyai atribut disabled , sedangkan Enabled Selector digunakan untu kemmeilih elemen yang mempunyai atribut enabled.

Syntax yang digunakan

Selector	Syntax	Keterangan
Disabled Selector	$(':disabled')	Untuk memilih semua elemen yang mempunyai atribut disabled

Enabled Selector	$(':enabled')	Untuk memilih semua elemen yang mempunyai atriubt enabled

Memilih semua elemen disabled dan memberi warna border

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $(":disabled").css("border","3px solid blue");
        });
        </script>
    </head>
    <body>
    <table>
        <tr>
            <td>First Name :</td>
            <td><input type="text" disabled placeholder="First Name"/></td>
        </tr>
        <tr>
            <td>Last Name :</td>
            <td><input type="text" disabled placeholder="Last Name"/></td>
        </tr>
        <tr>
            <td>Address :</td>
            <td><input type="text" placeholder="Address"/></td>
        </tr>
        <tr>
            <td>Note :</td>
            <td><textarea> </textarea></td>
        </tr>
        <tr>
            <td><input disabled="" type="button" value="Submit" /></td>
        </tr>
        </table>
    </body>
</html>

Memilih semua elemen input text disabled dan memberi warna border.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $('input[type="text"]:disabled').css("border","3px solid blue");
        });
        </script>
    </head>
    <body>
 <table>
            <tr>
  <td>First Name :</td>
  <td><input type="text" disabled placeholder="First Name"/></td>
     </tr>
            <tr>
  <td>Last Name :</td> 
  <td><input type="text" disabled placeholder="Last Name"/></td>
     </tr>
            <tr>
  <td>Address :</td>
  <td><input type="text" placeholder="Address"/></td>
     </tr>
            <tr>
  <td>Note :</td>
  <td></td>
            </tr>
            <tr>
                <td><input disabled="" type="button" value="Submit" /></td>
            </tr>
        </table>
    </body>
</html>

Memilih semua elemen enabled dan memberi warna border

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $(':enabled').css("border","3px solid red");
        });
        </script>
    </head>
    <body>
 <table>
            <tr>
  <td>First Name :</td>
  <td><input type="text" disabled placeholder="First Name"/></td>
     </tr>
            <tr>
  <td>Last Name :</td>
  <td><input type="text" disabled placeholder="Last Name"/></td>
     </tr>
            <tr>
  <td>Address :</td>
  <td><input type="text" placeholder="Address"/></td>
     </tr>
            <tr>
  <td>Note :</td>
  <td><textarea> </textarea></td>
            </tr>
            <tr>
                <td><input disabled="" type="button" value="Submit" /></td>
            </tr>

Memilih elemen textarea enabled dan memberi warna border

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $('textarea:enabled').css("border","3px solid red");
        });
        </script>
    </head>
    <body>
 <table>
            <tr>
  <td>First Name :</td>
  <td><input type="text" disabled placeholder="First Name"/></td>
     </tr>
            <tr>
  <td>Last Name :</td>
  <td><input type="text" disabled placeholder="Last Name"/></td>
     </tr>
            <tr>
  <td>Address :</td>
  <td><input type="text" placeholder="Address"/></td>
     </tr>
            <tr>
  <td>Note :</td>
  <td><textarea> </textarea></td>
            </tr>
            <tr>
                <td><input disabled="" type="button" value="Submit" /></td>
            </tr>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Friday, 3 June 2016

Cara Menggunakan Disabled dan Enabled Selector dalam JQuery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels