如何在选择列表中选择多于4个项目时禁用按钮

Question

我正在开发一个表单。它有两个选择列表。您可以通过按钮将第一个列表中的任何项目添加到第二个列表中。我想要做的是禁用第一个按钮，该按钮用于添加项目，当选择的项目数量大于4时。代码所在的URL为：http://www.fabulous-fi.eu/projectsevent2016/test.php。

在此先感谢！

我使用的代码是：

function selectFillbis(){ 
    var html = ''; 

    for (var i=0; i < projectTopic.length; i++){ 

     html += "<option id='cod-"+i+"' value='"+ projectTopic[i] +"'>"+ projectTopic[i] +"</option>"; 
    } 
    $('#select-primary-bis').append(html); 
    $('#project-select-bis').append (html); 

    $('#select-add-bis').on('click', function(){ 
     $('#select-primary-bis :selected').remove().appendTo('#select-secondary-bis'); 
    }); 
    $('#select-remove-bis').on('click', function(){ 
     $('#select-secondary-bis :selected').remove().appendTo('#select-primary-bis'); 
    }); 

} 

Answer 1

当添加或从选择中删除时，检查添加列表的大小，并添加禁用的类到按钮，如果它超过4.在我的例子中，我用一种名为updateDisabled的方法做到了这一点，点击添加或删除按钮：

function selectFillbis(){ 
     var updateDisabled = function(){ 
      if($('#select-secondary-bis :selected').size() > 4) 
       $("#select-add-bis").addClass('disabled'); 
      else 
       $("#select-add-bis").removeClass('disabled'); 
     }; 

    var html = ''; 

    for (var i=0; i < projectTopic.length; i++){ 

     html += "<option id='cod-"+i+"' value='"+ projectTopic[i] +"'>"+ projectTopic[i] +"</option>"; 
    } 
    $('#select-primary-bis').append(html); 
    $('#project-select-bis').append (html); 

    $('#select-add-bis').on('click', function(){ 
     $('#select-primary-bis :selected').remove().appendTo('#select-secondary-bis'); 
     updateDisabled(); 
    }); 
    $('#select-remove-bis').on('click', function(){ 
     $('#select-secondary-bis :selected').remove().appendTo('#select-primary-bis'); 
     updateDisabled(); 
    }); 

} 

Answer 2

Working fiddle。

你可以追加项目后，在click事件添加条件到select-secondary-bis检查则长度隐藏的div select-add-bis如果它等于4：

$('#select-add-bis').on('click', function(){ 
    $('#select-primary-bis :selected').remove().appendTo('#select-secondary-bis'); 

    if($('#select-secondary-bis option').length>=4){ 
     $(this).hide(); 
    } 
}); 

然后，你可以告诉它，当项目在select-remove-bis点击不到4事件：

$('#select-remove-bis').on('click', function(){ 
    $('#select-secondary-bis :selected').remove().appendTo('#select-primary-bis'); 

    if($('#select-secondary-bis option').length<4){ 
     $('#select-add-bis').show(); 
    } 
}); 

希望这会有所帮助。