CODEWITHSUNDEEP
javascriptjquery-uidisabled-control
gimba
gimba

Reputation: 511

enabe/disable jquery ui components

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);
});

Upvotes: 0

Views: 170

Answers (2)

Hamed Ali Khan
Hamed Ali Khan

Reputation: 1118

Add this to your fiddle

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

Upvotes: 2

mirelon
mirelon

Reputation: 4996

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/

Upvotes: 0

Related Questions