enable option in select

Asked

Viewed 69 times

2

I have the following select:

    <select id="selectChannel" class="form-control form-control-sm custom-select">
        <option value="" disabled="disabled">Selecione o canal</option>
        <option value="1" disabled="disabled">Canal 1</option>
        <option value="2">Canal 2</option>
        <option value="3">Canal 3</option>
        <option value="4">Canal 4</option>
    </select>

Every time a pewssoa adds some of the channels, I disable it so that it is not possible to add the same channel more than once. When clicked on add, I only execute the following command to disable

$("#selectChannel option:selected").attr('disabled','disabled')

What I need is when the user deletes a channel, the option is available again. I have the information of which channel is being deleted, but how do I enable the option in select?

javascript html jquery

  • How do you "delete channel" ? Your code only shows the select and the method of disabling it.. You also haven’t explained why you really need to delete the channel and etc, try to make your question as clear as possible.

  • "I have the information of which channel is being deleted"... what would that information be? Value?

2 answers

1


If you have the value you can use a selector to find it and remove the attribute with removeAttr. A possible selector would be option[value="2"]...

For example:

$('#selectChannel option[value="2"]').removeAttr('disabled')

  • that solved it. Thank you!

1

This example can help you: 

$('[data-canal]').click(function() 
{

const el = $(this);

$(`#selectChannel option[value="${el.data('canal')}"]`).prop('disabled', false);

el.remove();

});
p {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <select id="selectChannel" class="form-control form-control-sm custom-select">
        <option value="" disabled="disabled">Selecione o canal</option>
        <option value="1" disabled="disabled">Canal 1</option>
        <option value="2" disabled>Canal 2</option>
        <option value="3" disabled>Canal 3</option>
        <option value="4" disabled>Canal 4</option>
</select>

<div>
<p data-canal="1">deletar Canal 1</p>
<p data-canal="2">deletar Canal 2</p>
<p data-canal="3">deletar Canal 3</p>
<p data-canal="4">deletar Canal 4</p>
</div>

Browser other questions tagged javascript html jquery

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