0

この選択可能なスクリプトを作成して、選択制限を設けようとしています。制限数の4を超えたら選択を止めてほしい。

http://jsfiddle.net/dw6Hf/51/

$(function() {
    $(".selectable").selectable({
        filter: "td.cs",

        stop: function() {
            var result = $("#select-result").empty();
            var result2 = $("#result2");
            $('.ui-selecting:gt(31)').removeClass("ui-selecting");

        //    alert($(".ui-selected").length);
            $('#divmsg').html($(".ui-selected").length*2+ " box selected")
            if ($(".ui-selected").length > 4) {
                //alert("Selection of only 4 allowed");
                $('#divmsg').html($('#divmsg').html() + ", Selection of only 4 allowed");
                $(".ui-selected").each(function(i, e) {                  
                    if (i > 3) {

                        $(this).removeClass("ui-selected");
                    }
                });
                return;
            }

            $(".ui-selected", this).each(function() {
                var cabbage = this.id + ', ';
                result.append(cabbage);
            });

            var newInputResult = $('#select-result').text();
            newInputResult = newInputResult.substring(0, newInputResult.length - 1);
            result2.val(newInputResult);
        }
    });
});​

ありがとうございました

4

2 に答える 2

0

これは動作します

$( "#selectable" ).selectable({
    selecting: function(event, ui) {
         if ($(".ui-selected, .ui-selecting").length > 4) {
           $(ui.selecting).removeClass("ui-selecting");
         }
    }       
});

これの複製

このようなものを編集 しますか？

$(function() {
    $(".selectable").selectable({
        filter: "td.cs",

        // do not allow selecting more than four items
        selecting: function(event, ui) {
             if ($(".ui-selected, .ui-selecting").length > 4) {
               $(ui.selecting).removeClass("ui-selecting");
             }
        }               

        // do whatever you like with the selected
        stop: function() {
            var result = $("#select-result").empty();
            var result2 = $("#result2");            

            $('#divmsg').html($(".ui-selected").length*2+ " box selected")

            $(".ui-selected", this).each(function() {
                var cabbage = this.id + ', ';
                result.append(cabbage);
            });

            var newInputResult = $('#select-result').text();
            newInputResult = newInputResult.substring(0, newInputResult.length - 1);
            result2.val(newInputResult);
        }
    });
});?
于 2012-06-13T14:55:31.073 に答える
0

これで、あなたが求めたものを提供する必要がある要件を理解できました。停止から選択可能に変更するということは、それが「選択」される前に決定できることを意味します。

フィドル

于 2012-06-13T14:05:08.340 に答える