Function in jquery disabled button

Asked

Viewed 227 times

2

How do I make for a div appear when a button is disabled, and when enabled I want this div stay hidden

 $(document).on('ready', '#btn-cadastra-atividade', function () 
    { 
    $this = $(this)
    if($this.attr('disabled') === true)
    { 
       $('#erroAtividade').show(); 
    }
    else
    {   
    $('#erroAtividade').hide(); 
    }});
javascript jquery

2 answers

0

I made an example where it shows both button status:

function divOnButton() {
  if ($('#btn1').prop('disabled')) {
    $('#div1').show();
  } else {
    $('#div1').hide();
  }
}

function statusOnButton() {
  $('#btn1').prop('disabled', !$('#btn1').prop('disabled'));
  divOnButton()
}
$(document).ready(function() {
  divOnButton();
  $("#btnStatus").click(function() {
    statusOnButton();
  });
});
#div1 {
  border: 1px solid #000;
}
#conteudo {
  height:18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--Como faço para uma div ser exibida quando um botão estiver desabilitado, e quando estiver habilitado quero que essa div fique oculta-->
<div id="conteudo">
  <div id="div1">
    Div Habilitada
  </div>
</div>
<br />
<button id="btn1" disabled>Botão</button>

<br /><br />
<br /><br />

<button id="btnStatus">Mudar Status Botão</button>

0

Just compare if the element has the attribute 'disabled'.

$(document).on('click', '.botao', function () { 
   $this = $(this)
   if($this.attr('disabled') === true)
   { 
      $('div').show(); 
   }else
   {   
      $('div').hide(); 
   }
});

In case you want to shoot this in another event, just what will be the Trigger:

$(document).ready(function(){

   $this = $('.botao');
   $this.each(function() {
      
 console.log('Disabled:' + $(this).prop('disabled')+' - ' + $(this).text())
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class='div'>div</div>
<button class='botao' disabled>Botão desabilitado X</button>
<button class='botao'>Botão Y</button>

  • I adapted it but it didn’t work, I put the code in the question

  • But what exactly do you want to do with the button ? To fire the 'onready' event, you need to specify the document, and then the event, in case you did it right, but the 'ready' will not fire, you need a Mutation or equivalent, something like: $(Document). on('Domnodeinserted', '#btn-register-activity', Function() .

  • There would be no direct action on the button, just wanted the function to listen when this button was disabled to display the div, and when enabled, hide the same div

  • So this 'Domnodeinserted' event is supposed to work, but you’ll need to find the equivalent upgraded mode for it, because this soon won’t work anymore.

  • From a glance at snnipet I added the answer.

  • It didn’t work :( it displayed Alert but didn’t do the div action

  • It gives yes, you need to add the 'disabled' to the button, if you have the attr disabled, it shows the div, if you do not have the attr disabled the div is hidden. In the example it is without the disabled, in case it hides the div, if you add 'disabled' to the button, the div is displayed.

Show 2 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.