1

最初のオプションがチェックされている場合は他のオプションを無効にしたい、そうでない場合はユーザーが複数のオプションを選択できるようにする必要があります。

複数のドロップダウンリストでオプションを無効にするさまざまな方法を試しましたが、何も機能しませんでした。

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

3 に答える 3

1

これを試してください：

$('#s8 option').click(function () {
   var selVal = $(':selected').val();
   if (selVal == 'Low') {
      $('option').prop('disabled', true);
   } else {
      $('option').prop('disabled', false);
   }
});
于 2013-02-20T05:12:02.457 に答える
1

これを試してください: - 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-20T05:19:37.063 に答える
0 
   <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

私は試しませんでしたが、このロジックを見つけました..多分それはあなたを助けるでしょう..

于 2013-02-20T05:13:21.997 に答える