jquery ui slider-尝试禁用单个句柄

}
           if ( ui.value == ui.values[3] && ui.value < 98 ) {
         off();
    }

解决方法

在下面的代码中,我在jQuery UI滑块小部件中扩展了_mouseCapture函数,以防止鼠标移动/选择具有ui-slider-handle-disabled类的句柄.它有点大,因为我必须复制现有的_mouseCapture函数并添加几行.我用插词标记了我的插入内容.

您可以测试此代码here on jsfiddle.

// extend jQuery UI slider widget's _mouseCapture function to allow disabling handles
// _mouseCapture function copied from jQuery UI v1.10.3
$.widget("ui.slider",$.ui.slider,{
    _mouseCapture: function (event) {
        var position,normValue,distance,closestHandle,index,allowed,offset,mouSEOverHandle,that = this,o = this.options;

        if (o.disabled) {
            return false;
        }

        this.elementSize = {
            width: this.element.outerWidth(),height: this.element.outerHeight()
        };
        this.elementOffset = this.element.offset();

        position = {
            x: event.pageX,y: event.pageY
        };
        normValue = this._normValueFromMouse(position);
        distance = this._valueMax() - this._valueMin() + 1;
        this.handles.each(function (i) {
            // Added condition to skip closestHandle test if this handle is disabled.
            // This prevents disabled handles from being moved or SELEcted with the mouse.
            if (!$(this).hasClass("ui-slider-handle-disabled")) {
                var thisDistance = Math.abs(normValue - that.values(i));
                if ((distance > thisDistancE) || (distance === thisDistance && (i === that._lastChangedValue || that.values(i) === o.min))) {
                    distance = thisDistance;
                    closestHandle = $(this);
                    index = i;
                }
            }
        });

        // Added check to exit gracefully if,for some reason,all handles are disabled
        if(typeof closestHandle === 'undefined')
            return false;

        allowed = this._start(event,indeX);
        if (allowed === falsE) {
            return false;
        }
        this._mouseSliding = true;

        this._handleIndex = index;

        closestHandle.addClass("ui-state-active")
            .focus();

        offset = closestHandle.offset();
        // Added extra condition to check if the handle currently under the mouse cursor is disabled.
        // This ensures that if a disabled handle is clicked,the nearest handle will remain under the mouse cursor while dragged.
        mouSEOverHandle = !$(event.target).parents().addBACk().is(".ui-slider-handle") || $(event.target).parents().addBACk().is(".ui-slider-handle-disabled");
        this._clickOffset = mouSEOverHandle ? {
            left: 0,top: 0
        } : {
            left: event.pageX - offset.left - (closestHandle.width() / 2),top: event.pageY - offset.top - (closestHandle.height() / 2) - (parseInt(closestHandle.css("borderTopWidth"),10) || 0) - (parseInt(closestHandle.css("borderBottomWidth"),10) || 0) + (parseInt(closestHandle.css("marginTop"),10) || 0)
        };

        if (!this.handles.hasClass("ui-state-hover")) {
            this._slide(event,normvalue);
        }
        this._animateOff = true;
        return true;
    }
});