Question

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

我尝试了不同的方法来禁用多个下拉列表中的选项，但没有任何效果。

<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>

Answer 1

试试这个：

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

Answer 2

   <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

我没有尝试，但我发现了这个逻辑......可能它会帮助你..

Answer 3

试试这个： - 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;
});

}）;

无法在jquery multi select中禁用选项

3 个答案: