Deshabilitar y habilitar un botón de entrada html

250

Entonces tengo un botón como este:

<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>

¿Cómo puedo deshabilitarlo y habilitarlo cuando quiero? Lo he intentado disabled="disable"pero habilitarlo de nuevo es un problema. Intenté volver a establecerlo en falso, pero eso no lo habilitó.

javascript jquery

— k.ken
fuente

¿Qué quieres decir con habilitarlo de nuevo? Una vez que lo deshabilita, no puede volver a habilitarlo desde el mismo método Me(), espero que sepa (porque está deshabilitado)

— cjds

2

Lo que intento hacer es deshabilitar y habilitar el botón cuando ocurren ciertos eventos.

— k.ken

461

Usando Javascript

Deshabilitar un botón html

document.getElementById("Button").disabled = true;

Habilitar un botón html

document.getElementById("Button").disabled = false;

Demo aquí

Usando jQuery

Todas las versiones de jQuery anteriores a 1.6

Deshabilitar un botón html

$('#Button').attr('disabled','disabled');

Habilitar un botón html
```
$('#Button').removeAttr('disabled');
```
Demo aquí

Todas las versiones de jQuery después de 1.6

Deshabilitar un botón html
```
$('#Button').prop('disabled', true);
```
Habilitar un botón html
```
$('#Button').prop('disabled', false);
```
Demo aquí

PS Actualizó el código basado en los cambios de jquery 1.6.1 . Como sugerencia, use siempre los últimos archivos jquery y el prop()método.

— palarse
fuente

¿Necesito los atributos allí para que esto funcione? like disables = "disable"

— k.ken

No, por dentro $(document).readypuedes llamar $('#Button').attr('disabled','disabled');. Esto deshabilitará el botón al cargar la página. Y cuando ocurren ciertos eventos, puede llamar $('#Button').removeAttr('disabled');a activarlo de nuevo ...

— palaѕн

¿Cómo agregar estilo gris si está deshabilitado?

— Lei Yang

1

@LeiYang puedes agregar algunos CSS como este

— palaѕн

Solo tenga en cuenta que verdadero y falso son booleanos, no cadenas, como escribió correctamente Palash

— Marco

24

Como lo está deshabilitando en primer lugar, la forma de habilitarlo es establecer su disabledpropiedad como false.

Para cambiar su disabledpropiedad en Javascript, use esto:

var btn = document.getElementById("Button");
btn.disabled = false;

Y, obviamente, para deshabilitarlo nuevamente, lo usaría trueen su lugar.

Como también etiquetó la pregunta con jQuery, podría usar el .propmétodo. Algo como:

var btn = $("#Button");
btn.prop("disabled", true);   // Or `false`

Esto está en las versiones más nuevas de jQuery. La forma más antigua de hacer esto es agregar o eliminar un atributo así:

var btn = $("#Button");
btn.attr("disabled", "disabled");
// or
btn.removeAttr("disabled");

La mera presencia de la disabledpropiedad desactiva el elemento, por lo que no puede establecer su valor como "falso". Incluso lo siguiente debería deshabilitar el elemento

<input type="button" value="Submit" disabled="" />

Debe eliminar el atributo por completo o establecer su propiedad.

— Ian
fuente

¿Qué pasa si quiero que el botón esté habilitado inicialmente y luego deshabilitado más tarde? También probé enable = "true". ¿Es habilitar la palabra clave adecuada?

— k.ken

2

@ k.ken No, la palabra clave está "deshabilitada". Si desea que el botón esté habilitado inicialmente, no coloque el atributo disableden absoluto. Solo úsalo <input type="button" value="Submit" />. Y al cambiar el estado, use .prop("disabled", true);(o false)

— Ian

10

Puede hacerlo con bastante facilidad con JavaScript directo, no se requieren bibliotecas.

Habilitar un botón

document.getElementById("Button").disabled=false;

Deshabilitar un botón

 document.getElementById("Button").disabled=true;

No se necesitan bibliotecas externas.

— Jon
fuente

4

el atributo de desactivación solo tiene un parámetro. si desea volver a habilitarlo, debe eliminar todo, no solo cambiar el valor.

— Una vez luché con un oso.
fuente

3

$(".btncancel").button({ disabled: true });

Aquí 'btncancel' es el nombre de la clase del botón.

— Hamid NK
fuente

0

Sin jQuery, la entrada de desactivación será más simple

Button.disabled=1;

Mostrar fragmento de código

function dis() {
  Button.disabled= !Button.disabled;
}

<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>

<button onclick="dis()">Toggle disable</button>

Expandir fragmento

— Kamil Kiełczewski
fuente

0

 <!--Button Disable Script-->
    <script type="text/javascript">
        function DisableButton() {
            document.getElementById("<%=btnSave.ClientID %>").disabled = true;
        }
        window.onbeforeunload = DisableButton;
    </script>
    <!--Button Disable Script-->

— JIYAUL MUSTAPHA
fuente

-2

Esto seguramente funcionará.

Para deshabilitar un botón

$('#btn_id').button('disable');

Para habilitar un botón

$('#btn_id').button('enable');

— Shalika
fuente

-6

Se adhieren a php ...

¿Por qué no solo permitir que el botón aparezca una vez que se cumplan los criterios anteriores?

<?
if (whatever == something) {
    $display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
    return $display;
}
?>

— Mi gaviota rueda sobre
fuente