HTML | Opción DOM deshabilitada Propiedad

La propiedad deshabilitada de la opción DOM se usa para establecer o devolver si el valor de una opción se deshabilitaría o no . El atributo deshabilitado para el elemento en HTML se usa para especificar que el valor de la opción está deshabilitado. Una opción deshabilitada no se puede hacer clic y no se puede usar. Es un atributo booleano

Sintaxis: 

  • Se utiliza para devolver la propiedad inhabilitada.
optionObject.disabled
  • Se utiliza para establecer la propiedad deshabilitada.
optionObject.disabled = true|false

Valores de propiedad:

  • true: Define que la opción está deshabilitada.
  • false: Define que el valor de la opción no está deshabilitado. Tiene un valor predeterminado.

Valor devuelto: Devuelve un valor booleano que representa que el valor de la opción está deshabilitado o no. 

Ejemplo-1: Este ejemplo ilustra cómo establecer la propiedad. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM option disabled Property</title>
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM option disabled Property</h2>
    <select id="GFG">
        <option>Choose an option</option>
        <option value="html">HTML</option>
        <option value="java">JAVA</option>
        <option value="C++">C++</option>
        <option value="php">PHP</option>
        <option value="perl">PERL</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button onclick="myGeeks()">Submit</button>
 
    <script>
        function myGeeks() {
           
            // Set disabled property "true".
            var x = document.getElementById(
             "GFG").options[2].disabled = true;
        }
    </script>
 
</body>
 
</html>

Producción: 

Antes de hacer clic en el botón:

  

Después de hacer clic en el botón:

  

Ejemplo-2: Este ejemplo ilustra cómo devolver la propiedad deshabilitada. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM option disabled Property</title>
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM option disabled Property</h2>
    <select id="GFG">
        <option>Choose an option</option>
        <option value="html">HTML</option>
        <option value="java">JAVA</option>
        <option value="C++">C++</option>
        <option value="php">PHP</option>
        <option value="perl">PERL</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button onclick="myGeeks()">Submit</button>
    <p id="sudo" style="font-size:25px;color:green;">
  </p>
   
    <script>
        function myGeeks() {
           
            // Return disabled property.
            var x = document.getElementById(
              "GFG").options[2].disabled;
           
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
 
</body>
 
</html>

Producción: 

Antes de hacer clic en el botón:

  

Después de hacer clic en el botón:

  

Navegadores compatibles: los navegadores compatibles con la propiedad deshabilitada de la opción DOM se enumeran a continuación:

  • Google Chrome versión 1 y superior
  • Edge versión 12 y superior
  • Firefox versión 1 y superior
  • explorador de Internet 
  • Ópera 
  • Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *