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>
<div id="checkbox">
<input id="checkbox1" type="checkbox" checked value="今日加权"/>今日加权
<input id="checkbox2" type="checkbox" checked value="昨日加权"/>昨日加权
<input id="checkbox3" type="checkbox" checked value="今日实时"/>今日实时
</div>
</p>
</body>
</html>
