如何根据
问题描述:
我有一个用户列表,每个用户都有一个角色。如何根据<option selected>禁用<option>?
被选为“Líder”的用户不能有多个角色,只有“Líder”。
如果用户选择另一个选项(女儿),则应禁用选项“Líder”。不是“Líder”的用户可以拥有多个角色。
这是问题的一个模拟:jsfiddle
HTML:
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
JS:
$('select').change(function(){
var sel = $(this);
var data = sel.data('prev');
var val = sel.val();
var prev;
if(data){ prev = data.val; }
sel.data('prev', {val: val});
sel.nextAll().each(function(){
if(prev){
$(this).find("[value='" + prev+ "']").prop("disabled",false);
$('.selectpicker').selectpicker('refresh');
}
$(this).find("[value='" + val + "']").prop("disabled",true);
$('.selectpicker').selectpicker('refresh');
});
$('.selectpicker').selectpicker('refresh');
});
答
您可以检查与下面的代码获得的效果 - jsfiddle
$('select').change(function() {
var sel = $(this);
disableThis(sel);
$('.selectpicker').selectpicker('refresh');
});
function disableThis(sel) {
var temSelecionado = false;
$("option[value='1']").each(function() {
if (this.selected) {
temSelecionado = true;
$(this).parent().each(function() {
$(this.options).each(function() {
if ($(this).val() != "1") {
$(this).prop("disabled", true);
}
})
});
}
else {
$(this).parent().each(function() {
$(this.options).each(function() {
if ($(this).val() != "1") {
$(this).prop("disabled", false);
}
})
});
}
});
}
+0
就是这样,@Arkej。但是,如果某些select被选为“Leader”,则必须在其他选择中禁用此选项... –
+0
我更改了一个逻辑...并发现一个新问题: 如何取消选择特定选择选项,返回到“初始状态”? 这里是我的问题的模拟: https://jsfiddle.net/andrealbson/o1xs3m8x/ –
发布您的尝试 –
https://jsfiddle.net/andrealbson/33q72pto/ –
我几乎得到了我想要的,但被选为“Líder”的用户已禁用该选项......并且在发送形式它提出了一个错误。 发生错误是因为select(parent)的选项也被禁用,并且在发送表单时,此选项为空... https://jsfiddle.net/andrealbson/9e2ovnth/ –