无法禁用jQuery多选择

我想禁用其他选项，如果第一个选项被选中，否则我需要允许用户选择多个选项。无法禁用jQuery多选择

我试过不同的方法来禁用多个下拉列表中的选项，但没有任何工作。

<html> 
<head> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script> 
<script type="text/javascript" src="ui.dropdownchecklist-1.4-min.js"></script> 
<!-- Apply dropdown check list to the selected items --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#s8").dropdownchecklist({emptyText: "Please Select...", width: 150 
     //, onItemClick: function(checkbox, selector){ 
//var justChecked = checkbox.prop("checked"); 
//var checkCount = (justChecked) ? 1 : -1; 
//for(i = 0; i < selector.options.length; i++){ 
    //if (selector.options[i].selected) checkCount += 1; 
    //selector.options[i].checked=false; 
    //selector.options[i].disabled = true; 
//} 
//}   
     }); 
    }); 
</script> 
<script type="text/javascript"> 
function optionAlert(val) 
{ 
    var x = document.getElementById(val); 
    var y = x.selectedIndex; 
    var len = x.options.length; 
    if(y!=-1){ 
    for(i=0; i<len; i++) 
    { 
     if(y != i) 
     { 
     x.options[i].disabled=true; 
     //alert(x.options[i].disabled); 
     var txt = x[i].text; 
     //alert(txt);  
     //document.getElementById(txt).disable = true;  
     $("#s8 option[value="+txt+"]").attr("disabled","disabled"); 
     //var option = $("option[value='" + txt + "']", this); 
     //alert(option); 
     //option.attr("disabled","disabled"); 
     //var curInnerHTML = document.body.innerHTML; 
     //alert(curInnerHTML); 
     //curInnerHTML = curInnerHTML.replace("disable", "disabled"); 
     //document.body.innerHTML = curInnerHTML; 
     //$('optgroup option').prop('disabled', true); 
     //$("#s8").attr("disabled", true); 
     //$("select option[value="+txt+"]").attr(state ? 'disable' : 'enable')); 
     //$(this).find("option[value="+txt+"]").prop("disabled", true); 
     //$(this).find("option:eq("+i+")").attr("disabled", true); 
     //$('#s8 option[value='+txt+']').attr('selected', 'selected'); 
     //$("#s8 option:selected").attr('disabled','disabled'); 
     //jQuery(':text:not(:hidden)').attr("disabled",true); 
     //jQuery("input[type='text']").prop("disabled", true); 
     //document.getElementById(txt).disabled=true; 
     } 
    } 
    } 
} 
</script> 
</head> 
    <body> 
    <table> 
    <tr> 
    <td> 
     <select name="drlOrderItem" id="s8" multiple="multiple" onChange="optionAlert('s8')"> 
      <option id="Low" value="Low" style='color:green' >Low</option> 
      <option id="Normal" value="Normal" style='color:grey' >Normal</option> 
      <option id="Medium" value="Medium" style='color:orange'>Medium</option> 
      <option id="High" value="High" style='color:red' >High</option> 
     </select> 
     </td> 
    </tr>  
    </table> 
    </body> 
    </html>

来源

2013-02-20 user2089654

在http://jsfiddle.net上做一个小提琴让用户更有效地帮助你。 – jagzviruz 2013-02-20 05:03:05

尝试了这一点：

$('#s8 option').click(function() { 
    var selVal = $(':selected').val(); 
    if (selVal == 'Low') { 
     $('option').prop('disabled', true); 
    } else { 
     $('option').prop('disabled', false); 
    } 
});

来源

2013-02-20 05:12:02 Jai

<select name="drlOrderItem" id="s8" multiple="multiple" onChange="optionAlert('s8')"> 
     <option id="Low" value="Low" style='color:green' >Low</option> 

     <optgroup> 
     <option id="Normal" value="Normal" style='color:grey' >Normal</option> 
     <option id="Medium" value="Medium" style='color:orange'>Medium</option> 
     <option id="High" value="High" style='color:red' >High</option> 
     </optgroup> 
    </select> 


1) $('#selectId>option:selected').val(); 

    if (this.value == 'Low') { 
     $('optgroup option').prop('disabled', true); 
    } else { 
     $('optgroup option').prop('disabled', false); 
    } 

2) if($('#selectId>option:selected')) 
     //your code

我没有试过，但我发现这个logic..may是它会帮助你..

来源

2013-02-20 05:13:21 sasi

您可能需要改进您的答案，因为它现在没什么用处。 – Ulises 2013-02-20 05:36:16

感谢@Ulises ..i编辑了答案 – sasi 2013-02-20 06:01:13

尝试了这一点： - http://jsfiddle.net/adiioo7/5d5XZ/1/

$(function(){ 
$("#s8").on("click",function(){ 
    if ($("#s8 option:eq(0)")[0].selected && $('#s8 option:selected').size()>1) 
    { 
     $("#s8").find("option").each(function(){ 
      $(this).prop('selected', false); 
     }); 
     $("#s8 option:eq(0)")[0].selected = true; 
    } 
    else if ($("#s8 option:eq(0)")[0].selected==false && $('#s8 option:selected').size()==1) 
     $("#s8 option:eq(0)")[0].selected = false; 
});

}）;

来源

2013-02-20 05:19:37

无法禁用jQuery多选择

回答

相关问题