2
<div class="desabilitar">
  <input type="text" >
  <label>Input 1</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 2</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 3</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 4</label>
</div>

Quiero deshabilitar un grupo de divs al poner el mouse sobre ellos pero quiero volver a habilitarlos cuando el mouse no este sobre ellos. El problema es que una vez deshabilitados no puedo volver a habilitar esos divs.

  $('.desabilitar').hover(
           function () {
              $('.desabilitar').prop('disabled', true);
           },
           function () {
              $('.desabilitar').prop('disabled', false);
           }
        );
1
  • 1
    deshabilitar div? No serian los input que quieres deshabilitar?
    – Einer
    Commented el 11 ago. 2017 a las 14:09

3 respuestas 3

3

Lo que tu debes hacer es deshabilitar los inputs dentro del div y puedes lograrlo con $('.desabilitar :input').prop('disabled', true);

$('.desabilitar').hover(
     function () {
        $('.desabilitar :input').prop('disabled', true);
     },
     function () {
        $('.desabilitar :input').prop('disabled', false);
     }
  );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desabilitar">
  <input type="text" >
  <label>Input 1</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 2</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 3</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 4</label>
</div>

Si lo que necesitas es deshabilitar el/los inputs DENTRO del div que haces hover debes aplicar

$('.desabilitar').hover(
   function () {
      $(this).children('input').prop('disabled', true);
   },
   function () {
      $(this).children('input').prop('disabled', false);
   }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desabilitar">
  <input type="text" >
  <label>Input 1</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 2</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 3</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 4</label>
</div>

5
  • No se. Aun asi no se explica porque se le quedan deshabilitados.
    – Einer
    Commented el 11 ago. 2017 a las 14:21
  • No entendi bien tu pregunta, puedes explicarla mejor??? @jufrfa
    – sioesi
    Commented el 11 ago. 2017 a las 15:21
  • en un formulario completo que yo tengo tengo que dar click derecho a la pagina seleccionar la opcion inspeccionar luego la pestaña console. y declarar manualmente. $('.desabilitar').hover( function () { $('.desabilitar :input').prop('disabled', true); }, function () { $('.desabilitar :input').prop('disabled', false); } );
    – jufrfa
    Commented el 11 ago. 2017 a las 15:25
  • ya lo solucione solo tenia que borrar el historial ._.
    – jufrfa
    Commented el 11 ago. 2017 a las 15:39
  • jaaja, saludos @jufrfa me alegro que te haya solucionado el problema :)
    – sioesi
    Commented el 11 ago. 2017 a las 15:40
1

No entendí bien quieres deshabilitar el input o todo el div? sie es el div debes apuntar al hijo del div que quieres deshabilitar o habilitar en este caso tu fubncion quedaria asi

$('.desabilitar').hover(
    function () {
       $('.desabilitar input').prop('disabled', true);
    },
    function () {
       $('.desabilitar input').prop('disabled', false);
    }
 );
1
  • Bienvenido. Las respuestas no debe ser usadas para solicitar aclaraciones o mejoras sobre las preguntas, para ello se usan los comentarios, pero se requiere un mínimo 50 puntos de reputación para poder comentar publicaciones de otros. "En teoría" no deberíamos responder preguntas que no son claras. Si decides hacerlo, en lugar de solicitar aclaraciones considera describir los supuestos que haces.
    – Rubén
    Commented el 11 ago. 2017 a las 14:37
1

Según entiendo disabled no es un propiedad estándar de div pero sí de input, esto por disable es para controles y un div es un elemento estructural cuya finalidad es agrupar elementos.

Dado que la clase "deshabilitar" está aplicada al div, para hacer el mínimo de cambios al código del OP se deberá usar algo como $(this).children('input') para inhabilitar el input que es hijo del div sobre el que se hace el "hover".

$('.desabilitar').hover(
     function () {
        $(this).children('input').prop('disabled', true);
     },
     function () {
        $(this).children('input').prop('disabled', false);
     }
  );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="desabilitar">
  <input type="text" >
  <label>Input 1</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 2</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 3</label>
</div>

<div class="desabilitar">
  <input type="text" >
  <label>Input 4</label>
</div>

Referencia

7.5.4 Grouping elements: the DIV and SPAN elements

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.