Ползунок jQuery-ui

Coral_Reef
На сайте с 02.03.2011
Offline
22
4560

Доброго времени суток, господа!

С помощью jQuery ui собираю калькулятор с ползунками. http://oldchampionat.ru/test/index.html

Необходимо сделать эти ползунки-слайдеры отключаемыми. Т.е. справа от ползунка стоит чекбокс (например), галочку убрал - ползунок не активен и передает значение "0", галочку поставил - ползунок работает.

Примерно как здесь: http://demosites.simplecoding.org/weightcalc/

Кто-нибудь знает как их сделать отключаемыми?

код моего калькулятора здесь:

<!DOCTYPE html>

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style type="text/css">
div.demo { padding: 10px !important; width: 200px;}
.ui-widget{font-size: 0.6em !important;}
</style>
<script>
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 5,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
calc();
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
$(function() {
$( "#slider-range-max2" ).slider({
range: "max",
min: 6,
max: 10,
value: 7,
slide: function( event, ui ) {
$( "#amount2" ).val( ui.value );
calc();
}
});
$( "#amount2" ).val( $( "#slider-range-max2" ).slider( "value" ) );
});

function calc(par){
type = document.cl_form.type.value;
amount = document.cl_form.amount.value;
amount2 = document.cl_form.amount2.value;

//var summ;
summ = Number(type) * ( Number(amount) + Number(amount2) );
document.cl_form.summ.value=summ;
document.getElementById("typetd").innerHTML=type;
document.getElementById("amounttd").innerHTML=amount;
document.getElementById("amount2td").innerHTML=amount2;
document.getElementById("summ").innerHTML=summ;
return false;
}
</script>
</head>
<body>
<form name="cl_form">
<div class="demo">
<p>
<label for="type">Type of rooms:</label>
<select name="type" id="type" onchange="calc(this.value);">
<option selected="selected" value="0">Select...</option>
<option value="1">Luxe (*1)</option>
<option value="2">Extra (*2)</option>
<option value="3">Comfort (*3)</option>
</select>
</p>
<p>
<label for="amount">Number of rooms, 1st floor:</label>
<input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:11px;" />
</p>
<div id="slider-range-max"></div>
<p>
<label for="amount2">Number of rooms, 2nd floor:</label>
<input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:11px;" />
</p>
<div id="slider-range-max2"></div>
<p>
<label for="summ">The summ:</label>
<input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="text">
</p>
<p>
<table border="1" cellpadding="3" style="border-collapse: collapse;">
<tr>
<td>
type: <p id="typetd">0</p>
</td>
<td>
1st: <p id="amounttd">0</p>
</td>
<td>
2nd: <p id="amount2td">0</p>
</td>
<td>
summ: <p id="summ">0</p>
</td>
<tr>
</table>
</p>
</div>
</form>
</body>
</html>
Ord
На сайте с 15.11.2005
Offline
149
Ord
#1

Насколько я понимаю, у слайдеров в JqueryUI есть свойство disabled, вот с ним и надо оперировать.

Например:

("#mycheckbox").live('change', function(){

... проверяем, что в чекбоксе и в зависимости от этого, дизаблим или енаблим ...

});

Электронная бухгалтерия Эльба (http://e-kontur.ru/?p=65549729) - рекомендую!
Coral_Reef
На сайте с 02.03.2011
Offline
22
#2
Ord:
Насколько я понимаю, у слайдеров в JqueryUI есть свойство disabled, вот с ним и надо оперировать.

Например:

("#mycheckbox").live('change', function(){

... проверяем, что в чекбоксе и в зависимости от этого, дизаблим или енаблим ...

});

А можно по подробней...

... Проблема в том, что я с jQuery и javascript практически не знаком, поэтому не могу понять, как нужному слайдеру-ползунку передать значение от чекбокса...

Ord
На сайте с 15.11.2005
Offline
149
Ord
#3

ну вот же я написал

$("#mycheckbox").live('change', function(){

if($("mycheckbox").attr("checked")=="checked"){

$( ".selector" ).slider({ disabled: true });

}

else{

$( ".selector" ).slider({ disabled: false });

}

});

Что-то в этом духе :P

Но если не знаете как решить задачу, надо либо самому изучать, либо платить денежку. В принципе того, что я написал должно быть достаточно для понимания

Coral_Reef
На сайте с 02.03.2011
Offline
22
#4
Ord:


$("#mycheckbox").live('change', function(){

if($("mycheckbox").attr("checked")=="checked"){
$( ".selector" ).slider({ disabled: true });
}
else{
$( ".selector" ).slider({ disabled: false });
}

});

Правильно я понял, что этот код заблокирует все слайдеры?

Ord
На сайте с 15.11.2005
Offline
149
Ord
#5
Правильно я понял, что этот код заблокирует все слайдеры?

Нет, этот код заблокирует слайдер с классом selector

Coral_Reef
На сайте с 02.03.2011
Offline
22
#6
Ord:
ну вот же я написал

$("#mycheckbox").live('change', function(){

if($("mycheckbox").attr("checked")=="checked"){
$( ".selector" ).slider({ disabled: true });
}
else{
$( ".selector" ).slider({ disabled: false });
}

});

Что-то в этом духе :P

Ковырял-ковырял - ничего не вышло((( Ну не программер я...😡

Ord:

либо платить денежку.

У меня на Веб-мани лежит 250WMR, готов отдать, если кто-нибудь поможет, покажет на моем примере. Например поставить блокирующие чекбоксы для слайдеров "Number of rooms, 1st floor" и "Number of rooms, 2nd floor".

R
На сайте с 10.09.2012
Offline
0
#7
Coral_Reef:
Ковырял-ковырял - ничего не вышло((( Ну не программер я...😡

У меня на Веб-мани лежит 250WMR, готов отдать, если кто-нибудь поможет, покажет на моем примере. Например поставить блокирующие чекбоксы для слайдеров "Number of rooms, 1st floor" и "Number of rooms, 2nd floor".

Выдрать код оттуда что мешает?

Coral_Reef
На сайте с 02.03.2011
Offline
22
#8

Всем спасибо... Выручили на другом форуме.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий