0

下面的代码将选择的数量限制为 3，并提供一个警告说不能再选择。

而不是这个，我希望其他选项被禁用并使用 CSS 显示为灰色。我认为简单地添加一个名为 .disabled 的类，其不透明度为 0.2 的 css 样式就可以解决问题。

我尝试使用它$('ul.image_picker_selector li').attr('class', 'disabled');，但它破坏了我的其余代码并将类添加到所有选项，而不仅仅是未选择的选项。

任何帮助，将不胜感激。

   <script type="text/javascript">
    jQuery(function($){
       $(document).on('mousedown', 'ul.image_picker_selector li', function(evt) {
        evt.preventDefault();
        evt.stopPropagation();

        // get the number of items already selected:
        var ctSelected = $(this).siblings('.selected').length;

        if (ctSelected === 3) {
            alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
        } else {
            $(this).toggleClass('selected');
        }
    });
    })
        </script>

    <ul class="thumbnails image_picker_selector">
    <li class="selected">
    <div class="thumbnail selected">
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-1.jpg">
    </div>
    </li>
    <li class=""><div class="thumbnail selected">
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-2.jpg">
    </div>
    </li>
    <li class="">
    <div class="thumbnail">
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-3.jpg">
    </div>
    </li>
    <li class="">
    <div class="thumbnail">
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-4.jpg">
    </div>
    </li>
    <li>
    <div class="thumbnail">
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-5.jpg">
    </div>
    </li>
    <li>
    <div class="thumbnail">
    <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q1-6.jpg">
    </div>
    </li>
    </ul>
4

2 回答 2

1

这个选择器应该可以工作：

$('ul.image_picker_selector li:not(.selected)').addClass('disabled');

此外，使用addClass不会破坏您的其他 CSS，并且可以很容易地使用removeClass不同的（如果我没记错的话）使用attr来更改类。

您甚至可以更深入地使用toggleClass.

于 2013-05-21T15:54:32.727 回答
0

像这样的东西？JSfiddle 上的示例

我已经添加了这个：

   if (ctSelected === 2) {
            $('ul.image_picker_selector li').not('.selected').addClass('disabled')
        }
于 2013-05-21T16:04:22.647 回答