Javascript (SELECT) Desabilitar options ao selecionar um.

[Mizrain Phelipe Sá]

Tenho um select que quando o usuário selecionar a option "NCI - Não consta informação - Código 0" ele deve desabilitar as outras opções não permitindo que seja adicionado nenhum option a mais.

Precisaria de um script que pegasse o "value" dessa minha option e desabilitasse as outras, como faço?

 

Obs: o "data-value" dessa option é = 0

 

 

Código:

 

<div class="row">
                <div class="col-md-4 form-group pmd-textfield" style="padding-top: 0.8em;">
                    <select asp-for="Vitima.COD_POSSUI_ANTECEDENTE_CRIMINAL"
                            asp-items="@(Model.Vitima.CodVitima > 0 ? Model.PossuiAntecedenteCriminal.Where(x => 				!x.Text.Contains("criança")) : new List<SelectListItem>())"
                            id="Antecedente"
                            onchange="toggleTabela(this, 'divAlertaAntecedenteCriminal', 'corpoTabelaAntecedenteCriminal', 'containerBtnAdicionaAntecedentes')"
                            data-modal="AvisoExclusaoAntecedentes"
                            class="select-country" disabled="@(Model.Vitima.CodVitima <= 0 ? true : false)">

                        @if (Model.Vitima.CodVitima > 0)
                        {
                            <option value="">Selecione uma opção</option>
                        }
                        else
                        {
                            <option value="">Salve a vítima antes de utilizar essa opção</option>
                        }
                    </select>
                </div>
            </div>

 

Código da option:

 

<div class="item" data-value="0">
	"NCI - Não Consta Informação - Código "
  <strong>0</strong>
</div>

 

[DiF]

@Mizrain Phelipe Sá Você pode usar o jquery, pegar o valor do data-value e fazer uma condição com 

$('#id').attr('disabled', 'disabled');

 

Exemplo:

 

$(document).ready(function){
  
  $(".item").on("click", function(){
      var dataValue = $(".item").attr("data-value");
      var disable = $('#Antecendente').attr('disabled', 'disabled');
      var enable = $('#Antecedente').removeAttr('disabled'); 
    
      (dataValue == 0) ? disable : enable ;
  }); 
});

 

Ainda não é muito bem claro se essa opção você escolhe no select ou clica no campo que você marcou. Se for algo que escolha no select, basta usar o evento de change no lugar de click atribindo ao id do select.

 

Tem N maneiras de resolver isso.. esse é uma delas. Você pode criar uma função que desativa ao clicar.