Question

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

$('#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);
        }
    })
})

如您所见，当选中一个或多个复选框时，它会滑动到某个范围。但我的问题是 - 当用户点击每个复选框，然后手动降低价格时。我该怎么做才能防止这种情况发生？

Answer 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/

将jQueryUI Slider限制为低于金额

1 个答案: