如何在選擇列表中選擇多於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(); 
    } 
}); 

希望這會有所幫助。