多重选择取消选择和残疾人

我想make如果所有的选择，则其他选项将被取消选择和残疾人，同样如果其他任何字段中选择了，那么所有选项将取消选择和残疾人

我的代码是

<select multiple name="device[]" id="device" class="form-control" > 
    <option value=\'ALL\' selected="selected">ALL</option> 
    <option value=\'Android\'>Android</option> 
    <option value=\'iPod\'>iPod</option> 
    <option value=\'iPad\'>iPad</option> 
    <option value=\'Java\'>Java</option> 
    <option value=\'Windows\'>Windows</option> 
    <option value=\'Linux\'>Linux</option> 
    <option value=\'Mac\'>Mac</option> 
</select>

而且

<select multiple name="country[]" id="device" class="form-control" > 
    <option value=\'ALL\' selected="selected">ALL</option> 
    <option value=\'BD\'>Bangladesh</option> 
    <option value=\'IN\'>India</option> 
    <option value=\'ID\'>Indonesia</option> 
    <option value=\'NG\'>Naigeria</option> 
    <option value=\'PK\'>Pakistan</option> 
</select>

来源

2017-06-21 Alex Adrian

亚历克斯，请尽量mine.It最新更新的代码为me.Please让工作正常我知道你是否仍然有问题。 –

编辑：

如何增加一个额外的按钮来重置菜单？请check this fiddle

OLD：

如果没有按住Ctrl键，然后其他选项将被自动取消

$(document).ready(function() { 
 
    $('#device, #country').on('change', function() { 
 
    var selectedVal = $(this).val(); 
 
    for (var i = 0; i < selectedVal.length; i++) { 
 
     if (selectedVal[i] === 'ALL') { 
 
     // $("#device > option").attr('disabled','disabled'); 
 
     $(this).find('option').attr('disabled', 'disabled'); 
 
     $(this).find('option[value=ALL]').removeAttr('disabled'); 
 
     } else { 
 
     $(this).find('option[value=ALL]').attr('disabled', 'disabled'); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select multiple name="device[]" id="device" class="form-control"> 
 
    <option value='ALL'>ALL</option> 
 
    <option value='Android'>Android</option> 
 
    <option value='iPod'>iPod</option> 
 
    <option value='iPad'>iPad</option> 
 
    <option value='Java'>Java</option> 
 
    <option value='Windows'>Windows</option> 
 
    <option value='Linux'>Linux</option> 
 
    <option value='Mac'>Mac</option> 
 
</select> 
 

 
<select multiple name="country[]" id="country" class="form-control"> 
 
    <option value='ALL'>ALL</option> 
 
    <option value='BD'>Bangladesh</option> 
 
    <option value='IN'>India</option> 
 
    <option value='ID'>Indonesia</option> 
 
    <option value='NG'>Naigeria</option> 
 
    <option value='PK'>Pakistan</option> 
 
</select>

来源

2017-06-21 14:25:42

它很不错，但如果我取消选择所有然后选项不可用太 –

答案编辑，请 –

一个小问题，如果我选择所有和任何彼此选择同一时间，另一种选择并不适用于所有 –

$('#device option').click(function(){ 
 
var Allselected = $('#device :selected').text(); 
 
    var AllselectedCountry = $('#country :selected').text(); 
 
if(Allselected =="ALL"){ 
 
$('#device option:not(:selected)').addClass('ashClass'); 
 
} 
 
else if (Allselected !="ALL"){ 
 
$('#device option:first-child').css('color', '#ccc'); 
 
$('#device option:not(:selected)').removeClass('ashClass'); 
 
} 
 
}); 
 
    $('#country option').click(function(){ 
 
    var AllselectedCountry = $('#country :selected').text(); 
 
    if(AllselectedCountry =="ALL"){ 
 
$('#country option:not(:selected)').addClass('ashClass'); 
 
} 
 
else if (AllselectedCountry !="ALL"){ 
 
$('#country option:first-child').css('color', '#ccc'); 
 
$('#country option:not(:selected)').removeClass('ashClass'); 
 
    
 
} 
 
});

.ashClass { 
 
    color: #ccc; 
 
} 
 
.blackClass { 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
    <select multiple name="device[]" id="device" class="form-control" > 
 
            <option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option>        </select> 
 
\t \t \t \t \t \t \t \t \t <select multiple name="country[]" id="country" class="form-control" > 
 
            <option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option 
 

 
value=\'PK\'>Pakistan</option></select>

更新ŧ他编码，希望这个解决你的问题。这是你在问什么？

来源

2017-06-21 14:26:52

如果我取消选择所有其他选项不可用 –

所以，而不是禁用它，我们可以改变颜色为#ccc？我想，一旦我们禁用它，我们就无法启用。 –

如果取消选择所有其他选项 –

通过禁用一个元素你说我不会使用这个元素，我拒绝使用这个元素，所以禁用的元素不能获得鼠标事件，所以禁用是错误的方式。

改为使其在视觉上被禁用。

这里是纯JS代码，因为我不喜欢jQuery的;）

<style> 
 

 
select { 
 
\t height:300px; 
 
\t width:150px; 
 
} 
 

 
</style> 
 

 
<body> 
 
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" > 
 
<option value=\'ALL\' selected="selected">ALL</option> 
 
<option value=\'Android\'>Android</option> 
 
<option value=\'iPod\'>iPod</option> 
 
<option value=\'iPad\'>iPad</option> 
 
<option value=\'Java\'>Java</option> 
 
<option value=\'Windows\'>Windows</option> 
 
<option value=\'Linux\'>Linux</option> 
 
<option value=\'Mac\'>Mac</option> 
 
</select> 
 

 
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" > 
 
<option value=\'ALL\' selected="selected">ALL</option> 
 
<option value=\'BD\'>Bangladesh</option> 
 
<option value=\'IN\'>India</option> 
 
<option value=\'ID\'>Indonesia</option> 
 
<option value=\'NG\'>Naigeria</option> 
 
<option value=\'PK\'>Pakistan</option> 
 
</select> 
 

 
<script> 
 
function Go(){ 
 
\t parentElements = document.getElementsByTagName("select"); 
 
\t 
 
\t for(var i = 0; i < parentElements.length; i++){ 
 
\t \t parentElement = parentElements[i] 
 
\t \t children = parentElement.childNodes; 
 
\t \t 
 
\t \t for(var j = 0; j < children.length; j++){ 
 
\t \t \t childNode = children[j]; 
 
\t \t \t 
 
\t \t \t if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){ 
 
\t \t \t 
 
\t \t \t \t if(childNode.value == "\\'ALL\\'" && childNode.selected == true){ 
 
\t \t \t \t \t 
 
\t \t \t \t \t for(var k = 0; k < children.length; k++){ \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t if(typeof(children[k].value) !== "undefined" && k != j){ 
 
\t \t \t \t \t \t \t children[k].style.color = "#ccc"; 
 
\t \t \t \t \t \t \t children[k].style.textDecorationLine = "line-through"; 
 
\t \t \t \t \t \t \t children[k].selected = false; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(typeof(children[k].value) !== "undefined" && k == j){ 
 
\t \t \t \t \t \t \t children[k].style.color = ""; 
 
\t \t \t \t \t \t \t children[k].style.textDecorationLine = ""; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t if(childNode.value != "\\'ALL\\'" && childNode.selected == true){ 
 
\t \t \t \t 
 
\t \t \t \t \t for(var k = 0; k < children.length; k++){ \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){ 
 
\t \t \t \t \t \t \t children[k].style.color = "#ccc"; 
 
\t \t \t \t \t \t \t children[k].style.textDecorationLine = "line-through"; 
 
\t \t \t \t \t \t \t children[k].selected = false; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){ 
 
\t \t \t \t \t \t \t children[k].style.color = ""; 
 
\t \t \t \t \t \t \t children[k].style.textDecorationLine = ""; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 
</script> 
 
</body>

来源

2017-06-21 15:35:54

不工作的兄弟 –

多重选择取消选择和残疾人

回答

相关问题