enabe/disable jquery ui components

Question

i want to enable/disable a slider every time a button is clicked.

here is the fiddle:

<div id="points" style="width:50px; margin-top: 17px; height:5px "></div>

<button id="lines" type="button" style="width:75px; height: 30px; margin-top:7px">lines</button>

$(function () {
    $("#points").slider({
        value: 100,
        min: 1,
        max: 100,
        slide: function (event, ui) {
        }
    });
    $('.ui-slider').slider('disable');
    $('.ui-slider-handle').height(12);
});

Hamed Ali Khan · Accepted Answer · 2014-02-19T12:10:34.387

2

Add this to your fiddle

$("#lines").click(function () {
    var disabled = $( ".ui-slider" ).slider( "option", "disabled" );
    $('.ui-slider').slider("option", "disabled", !disabled);
});

edited Feb 19 '14 at 12:10

answered Feb 19 '14 at 11:29

Hamed Ali Khan

1,108
3
23
29

hi hamed, your solution works for fiddle but not in my code. I copied it exactly. Do you have an idea what the problem could be? – gimba Feb 24 '14 at 15:41
Hi gimba, I copied your code from fiddle and tested, it is working for me locally, what error you are getting? – Hamed Ali Khan Feb 25 '14 at 06:50

score 0 · Answer 2 · answered Feb 19 '14 at 11:29

0

JQuery code:

$('#lines').click(function(){
  if($('.ui-slider').hasClass('ui-slider-disabled'))
     $('.ui-slider').slider('enable');
  else
     $('.ui-slider').slider('disable');
});

Updated fiddle: http://jsfiddle.net/D2RLR/4861/

answered Feb 19 '14 at 11:29

mirelon

4,896
6
40
70

enabe/disable jquery ui components

2 Answers2