Question

我正在开发一个表单。它有两个选择列表。您可以通过按钮将第一个列表中的任何项目添加到第二个列表。我想要做的是当所选项目的数量超过4时，禁用第一个按钮添加项目。网址代码为：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

<强> 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();
    }
});

希望这有帮助。

Answer 2

在选择中添加或删除时，检查添加列表的大小，如果超过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();
    });

}

如果在选择列表中选择了超过4个项目，如何禁用按钮

2 个答案: