下拉复选选择超过3个时让用户选择不了 10C

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>

4个回答

自己看这个插件的api是否有配置限制选多少项的,没有就需要自己改代码了。而且你去哪下载的,这么多这种jquery插件

给复选框做个监听,判断一下
$('input[type=checkbox]').off('click').on('click', function(){
var len = $('input[type=checkbox]:checked').length;
if (len > 3){
$(this).prop('checked', false);
}
});


监听一下就行啊。 我只是一个打酱油路过的围观群众

每选择一个值就是一个复选框值变动方法jquery中有个change方法,它就可以监听值变化,而复选框的值会已逗号分隔开,你就可以切割下,当对象大于3个时,就不让它在this上面添加checked="checked",并给个提示。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!