Enable select by selecting with jQuery

Asked

Viewed 177 times

0

I conducted a cursory research on enabling a select when choosing an option in another select, but I couldn’t find anything that applied.

$(document).ready(function() {
  $('select#select1').select(function() {
    $('select#select2').prop('disabled', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!doctype html>
<html>

<body>
  <select id="select1">
    <option>Opção 1</option>
    <option>Opção 2</option>
    <option>Opção 3</option>
  </select>

  <select id="select2" disabled>
    <option>Opção 1</option>
    <option>Opção 2</option>
    <option>Opção 3</option>
  </select>
</body>

</html>

jquery select
  • 1

    You have two selects, being that the first one is like Disable, you want that by clicking on it the attribute Disable is removed?

  • I do not believe that all events are disabled.

  • @hugocsl Yes! But I don’t think it’s going to work using some event in it.

  • 1

    I don’t really know if it’s possible, but you can have an "invisible" element over the select that when you click on it and select it you take the disabled.. But that would be gambiarra in my view, there must be a more correct way to do it

  • 1

    That’s exactly what I did. I put a div with background-color: Transparent and z-index: 1; on it, and with jQuery I enabled select and removed the div with $('div#code'). remove(); by clicking on div. Plenty Ambi! Thanks again, @hugocsl.

  • 1

    @hugocsl I changed the question to something more doable.

Show 1 more comment

1 answer

2


Try to use the $(...).on("change", ...):

$(document).ready(function() {
  $('select#select1').on('change', function() {
    $('select#select2').prop('disabled', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!doctype html>
<html>

<body>
  <select id="select1">
    <option>Opção 1</option>
    <option>Opção 2</option>
    <option>Opção 3</option>
  </select>

  <select id="select2" disabled>
    <option>Opção 1</option>
    <option>Opção 2</option>
    <option>Opção 3</option>
  </select>
</body>

</html>

  • True! I had forgotten about the change() function;. Thank you!

Browser other questions tagged jquery select

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