javascript - 下拉复选选择超过3个时让用户选择不了-PHP中文网问答

1.我希望一个下拉复选，用户点击超过3个以后，其他几个不能再选择，在下拉复选框没有选上那个值。选上的只能再反选。
2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
        
      //这一段是网上下的，这个MultiSelect的设置
      $("#e1").multiselect({
        header: false,
        height: 200,
        minWidth: 200,
        selectedList: 10,//预设值最多显示10被选中项
        hide: ["explode", 500],
        noneSelectedText: 'Please select an option',
        close: function(){
          var values= $("#example").val();
          $("#hfexample").val(values);
        }
     });
      
    //这一段是网上下的，这个MultiSelect的设置
      $("#e2").multiselect({
            header: false,
            height: 200,
            minWidth: 200,
            selectedList: 10,//预设值最多显示10被选中项
            hide: ["explode", 500],
            noneSelectedText: '请选择一个品种',
            close: function(){
              var values= $("#example").val();
              $("#hfexample").val(values);
            }
      });
});


</script>

<script>
var rateType;
var rateTypeNum;
var termType;
var termTypeNum;
var todw;
var todc;
var prew;
var todwNum;
var todcNum;
var prewNum;

function initialize(){
    rateType = $("#span1 select").val();
    termType = $("#span2 select").val();
    todw = $("#checked1 select").val();
    todc = $("#checked3 select").val();
    prew = $("#checked2 select").val();
    
    if(rateType){
        rateTypeNum = rateType.length;
    }else{
        rateTypeNum = 0;
    }
    if(termType){
        termTypeNum = termType.length;
    }else{
        termTypeNum = 0;
    }
    if(todw){
        todwNum = 1;
    }else{
        todwNum = 0;
    }
    if(todc){
        todcNum = 1;
    }else{
        todcNum = 0;
    }
    if(prew){
        prewNum = 1;
    }else{
        prewNum = 0;
    }
}

function change(){
    //要求在这个函数里面写处理逻辑：
    /*
    两个下拉复选组合是一个品种，每个复选框是一个种类，要求只能选择三种。
    当已选三种的时候，已选的可以去掉勾选，没选的不能再选。如果再选，弹出提示："666"
    */
    console.log(111);
    //$('#e1 option:eq(1)').attr('selected','selected');
    //$('#e1 option:eq(1)').prop('selected','selected');
    //$("#span1 option:eq(3)").prop('disabled', 'disabled');
    //$("#aa").prop('disabled', 'disabled');
    
    
}

</script>

<script>
    $(function(){
        initialize();
        change();
        var ba = document.getElementById("aa");
        ba.prop('disabled', 'disabled');
        
        $("#span1 select").on("change", function(){
            initialize();
            change();
        });
        $("#span2 select").on("change", function(){
            initialize();
            change();
        });
        $("checkbox1").click(function(){
            initialize();
            change();
        });
        $("checkbox2").click(function(){
            initialize();
            change();
        });
        $("checkbox3").click(function(){
            initialize();
            change();
        });
        
    });
    

</script>
</head>
<body>
 <h2>Displaying options in a list</h2>
 <p>
        <span id="span1">
            <select id="e1" name="example" multiple="multiple" style="width:400px">
                <option value="option1">Option 1</option>
                <option value="option2" selected>Option 2</option>
                <option id="aa" value="option3">Option 3</option>
                <option value="option4">Option 4</option>
                <option value="option5" disabled="disabled">Option 5</option>
                <option value="option6">Option 6</option>
                <option value="option7">Option 7</option>
            </select>
        </span>
        
        <span id="span2">
            <select id="e2" name="e2" multiple="multiple" style="width:400px">
                <option value="optionA">Option A</option>
                <option value="optionB" selected>Option B</option>
                <option value="optionC">Option C</option>
                <option value="optionD">Option D</option>
                <option value="optionE">Option E</option>
                <option value="optionF">Option F</option>
                <option value="optionG">Option G</option>
            </select>
        </span>
        
        <p id="checkbox">
            <input id="checkbox1" type="checkbox" checked value="今日加权"/>今日加权
            <input id="checkbox2" type="checkbox" checked value="昨日加权"/>昨日加权
            <input id="checkbox3" type="checkbox" checked value="今日实时"/>今日实时
        </p>
        
        
        
    </p>
    
</body>
</html>