1

如果用户从复选框中选择某些内容，我需要“冻结”滑块。我的代码如下：

$('#slider').slider({
            range: 'min',
            value: 20,
            min: 0,
            max: 500,
            slide: function(event, ui) {
                $('input#amount').val('$' + ui.value);
            }
        });
$('div.checkboxes').children('p').children('input').each(function() {
    $(this).change(function() {
        var amount = $(this).attr('data-amount'),
            curr = $('input#amount').val().replace('$',''),
            newPrice = parseFloat(curr)+parseFloat(amount),
            oldPrice = parseFloat(curr)-parseFloat(amount);

        if($(this).is(':checked')) {
            $('#slider').slider({
                'value': newPrice
            });
            $('input#amount').val('$' + newPrice);
        } else {
            $('#slider').slider({
                'value': oldPrice
            });
            $('input#amount').val('$' + oldPrice);
        }
    })
})

如您所见，当检查一个或多个复选框时，它会滑到一定范围。但我的问题是 - 当用户点击每个复选框然后手动向下滑动价格时。我能做些什么来防止这种情况发生？

4

1 回答 1

1

我知道的唯一方法是检查slide函数中的值，如果不尊重，则限制从函数本身返回 false。

在我的示例中，我prizeLimit从一个按钮设置了一个全局范围的变量（但我可以在任何地方设置），并在滑块slide事件中检查该变量。

代码：

var prizeLimit = 0;

$(document).ready(function () {

    $('#amount').val('$20');

    $('#slider').slider({
        range: 'min',
        value: 20,
        min: 0,
        max: 500,
        slide: function (event, ui) {
            if (ui.value < prizeLimit) return false;

            $('#amount').val('$' + ui.value);
        }
    });

    $('#setPrizeFree').click(function () {
        prizeLimit = 0
    });

    $('#setPrizeMin').click(function () {
        prizeLimit = 158
        $('#slider').slider({
            'value': 158
        });
        $('input#amount').val('$158');
    });

});

演示：http: //jsfiddle.net/IrvinDominin/3bCzb/

于 2013-08-18T15:35:24.603 回答