enable and disable div with hover

Question

enable and disable div with hover

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

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>

I want to disable a group of divs by putting the mouse over them but I want to re-enable them when the mouse is not over them. The problem is that once disabled, I can not re-enable those divs.

  $('.desabilitar').hover(
           function () {
              $('.desabilitar').prop('disabled', true);
           },
           function () {
              $('.desabilitar').prop('disabled', false);
           }
        );

javascript jquery

asked by jufrfa 11.08.2017 в 15:57

source

3 answers

1

I did not understand either you want to disable the input or the whole div? sie is the div you must point to the son of the div you want to disable or enable in this case your fubncion would be like this

$('.desabilitar').hover(
    function () {
       $('.desabilitar input').prop('disabled', true);
    },
    function () {
       $('.desabilitar input').prop('disabled', false);
    }
 );

answered by 11.08.2017 в 16:30

1

As I understand disabled is not a standard property of div but of input , this for disable is for controls and a div is a structural element whose purpose is to group elements.

Since the "disable" class is applied to the div , to make the minimum changes to the OP code, something like $(this).children('input') should be used to disable the input that is the child of the div on the what is the "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>

Reference

7.5.4 Grouping elements: the DIV and SPAN elements

answered by 11.08.2017 в 16:29

Know if a number is even or odd using indirect recursion Remove duplicates in an array of objects in PHP

score 3 · Accepted Answer

What you should do is disable the inputs within the div and you can achieve it with $('.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>

If what you need is to disable the / the inputs INSIDE the div that you make hover you must apply

$('.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>