JS逻辑-添加2个多选复选框 [英] JS logic - adding 2 multiselect checkboxes

问题描述

只需要一点JS逻辑的帮助，因为我还很陌生.我有2个单独的multiselect下拉复选框列表，用户可以从中选择.截至目前，他们每个人最多只能选择5个.我该如何设置它在两个下拉菜单中都加了5个总数的地方.

Just need help with a little JS logic as I'm pretty new to it. I have 2 seperate multiselect dropdown checkbox list user can select from. As of now they can choose no more than 5 from each. How could I set it up where it adds boths drop downs to only allow 5 TOTAL for both.

<select id="dropdown1" multiple="multiple" class="multiselect">
<select id="dropdown2" multiple="multiple" class="multiselect">

js

$(document).ready(function() {
    $(".multiselect").multiselect({
    header: "Choose up to 5 areas",
    click: function(event,ui){
              if( $(this).multiselect("widget").find("input:checked").length > 5 ){
               return false;
          }},
      selectedList:5
    });

我假设我将使用id而不是仅使用".multiselect"类，然后添加它们. if语句中的#dropdown1+#dropdown2 > 5之类的东西.我只是根本不知道该使用什么正确的语法，有人可以帮助我.

I'm assuming I would use the id's instead of just the ".multiselect" class then add them. Something like #dropdown1+#dropdown2 > 5 in the if statement. I just simply don't know proper syntax to go about it someone could help me out.

如果您不熟悉jQuery小部件，我正在使用: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

If your not familiar with the jQuery widget I'm using:http://www.erichynds.com/blog/jquery-ui-multiselect-widget

每个请求用户689

$(document).ready(function() {
    $(".multiselect").multiselect({
    header: "Choose up to 5 areas",
    click: function(event,ui){
            if($(".multiselect").multiselect("getChecked").map(function(){
                return this.value;    
                }).size() > 5){ return false;}},
      selectedList:5
    });

推荐答案

您可以执行此操作.

您将显示一条消息，并在数字大于5时也取消选择该项目.

You will show a message and also unselect the item when the number is more than 5.

使用Jquery的Java

$(".multiselect option").click(function(){      
        if($(".multiselect").children(":checked").length > 5){
            if($(this).is(":checked")){
                $(this).removeAttr("selected");
                alert("You can select only 5 items");
            }
        }
    }
);

这篇关于JS逻辑-添加2个多选复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！