How do I do when an option is disabled in select, does jquery detect this action (deselect)?

Question

How do I do when an option is disabled in select, does jquery detect this action (deselect)?

Navigation

#1 by (1 votes)

1

I'm having a problem when I uncheck an option on a particular select. I can not make the select option, when unchecked, return to its initial state, ie, reset. So, I thought of JQuery detecting when an option is cleared, but I do not 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><scriptsrc="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><linkhref="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>

javascript html jquery html-select toggle

asked by anonymous 25.11.2016 / 12:19

1 answer

I can not make this program work. Always says numbers are divisible Add TextBox's results from one page to a table of another HTML page

score 1 · Accepted Answer

With multiple select the stored value is an array with the values selected. With each change you can check whether the single 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');
                });
            });
        }
    });
});