How do I stop when an option is disabled in select, jquery detects that action (deselect)?

Asked

Viewed 143 times

1

I have a problem when I uncheck an option on a particular select. I cannot make the select option, when unchecked, return to its initial state, that is, how to reset. So, I thought Jquery detect when an option is unchecked, but I don’t know how to do it.

Below is a simulation of my problem:

var unique = 1;

$('select').on('change', function(){
    var options = $('.selectpicker').find('option').filter(function(){
        return unique == this.value;
    });
    //para nao ocultar do select pai
    if(unique == this.value){
        options.hide();
        $(this).find('option[value="'+unique+'"]').show();
        $(this).each(function() {
                $(this.options).each(function() {
                	if(($(this).val() == "1")){
                  }
                    if ($(this).val() != "1") {
                        $(this).prop("disabled", true);
                    }
                })
            });
        $('.selectpicker').selectpicker('refresh');
    }
    else {
        if($(this).find('option[value="'+unique+'"]:visible').size() > 0){
            options.show();
           
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<select class="selectpicker" id="funcao" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
    <br><br>
    <select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
    <br><br>
    <select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
    <br><br>
    <select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>

1 answer

1


with select multiple the value saved is an array with the selected values. With each change you can check whether the unique value exists or not.

$(document).ready(function() {
    var unique = "1";

    $('select').selectpicker();

    $('select').on('change', function (e) {
        var selectedOptions = $(e.target).val();
        if(selectedOptions.indexOf(unique) != -1) {
            $('select').each(function(i, sel) {
                if (sel == e.target) {
                    $(sel).children().each(function(i, opt) {
                        if (opt.value != unique) {
                            $(opt).prop("disabled", true);
                            $('select').selectpicker('refresh');
                        }
                    });
                }
                else {
                    $(sel).children().each(function(i, opt) {
                        if (opt.value == unique) {
                           $(opt).prop("disabled", true);
                           $('select').selectpicker('refresh');
                        }
                    });
                }
            });
        }

        var unique_exists = false;

        $('select').each(function(i, sel) {
            var selectedOptions = $(sel).val();
            if (selectedOptions.indexOf(unique) != -1) {
                unique_exists = true;
            }
        });

        if(!unique_exists) {
            $('select').each(function(i, sel) {
                $(sel).children().each(function(i, opt) {
                    $(opt).prop("disabled", false);
                    $('select').selectpicker('refresh');
                });
            });
        }
    });
});
  • 1

    Perfect, @Sorry! Thanks for the help!

Browser other questions tagged

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