Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Checkbox, JavaScript, Bootstrap не могу разобраться / 11 сообщений из 11, страница 1 из 1
09.10.2014, 01:20
    #38771058
SashkaBol
SashkaBol
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
Есть код:
HTML
Код: html
1.
2.
3.
4.
5.
<label  th:each="bla : ${blabla}"  >
 <input type="checkbox" th:field="*{choosen}" th:value="${bla}" th:text="${bla}" />
</label>

<input class="btn btn-default" type="submit" value="Submit" disabled="disabled"/>



JS
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
<script language="javascript">
    var checkboxes = $("input[type='checkbox']"),
            submitButt = $("input[type='submit']");

    checkboxes.click(function() {
        submitButt.attr("disabled", !checkboxes.is(":checked"));
    });

</script>



Работает на ура! как только я что-то выбираю в чекбоксах - кнопка Submit становится доступной. Но как только я добавляю аттрибут Bootstrap class="btn btn-default"
Код: html
1.
2.
3.
<label  th:each="bla : ${blabla}"  class="btn btn-default">
 <input type="checkbox" th:field="*{choosen}" th:value="${bla}" th:text="${bla}" />
</label>


То код перестает работать, то есть при выборе значения кнопка Submit так и остается недоступной. Как можно обойти эту проблему?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2014, 02:05
    #38771067
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
В бутстрапе кнопка отключается не как обычно disabled="true", а disabled="disabled"

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<p>
   <button type="button" class="btn btn-default btn-lg">
      Default Button
   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      Disabled Button
   </button>
</p>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2014, 02:14
    #38771071
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
Relic HunterВ бутстрапе кнопка отключается не как обычно disabled="true"...А "как обычно" - это про что?

Атрибут disabled
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2014, 02:15
    #38771073
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
Атрибут disabled
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2014, 03:39
    #38771085
SashkaBol
SashkaBol
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
Relic HunterВ бутстрапе кнопка отключается не как обычно disabled="true", а disabled="disabled"

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<p>
   <button type="button" class="btn btn-default btn-lg">
      Default Button
   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      Disabled Button
   </button>
</p>


Несколько раз перечитал сообщение, но так и не понял к чему это. Простите за непонятливость. Можете разжевать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2014, 04:44
    #38771093
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
Извини, камрад. проблема в чем-то другом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2014, 11:52
    #38771445
carrotik
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
SashkaBol,

а если вот так

Код: html
1.
<button type="button" id="myButton" class="btn btn-default btn-lg disabled">



а в скрипте

Код: javascript
1.
$("#myButton").attr('class', "btn btn-default btn-lg");
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2014, 06:11
    #38775769
SashkaBol
SashkaBol
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
carrotikSashkaBol,

а если вот так


Это не совсем в ту сторону
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2014, 10:13
    #38775890
carrotik
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
SashkaBolcarrotikSashkaBol,

а если вот так


Это не совсем в ту сторону

.. а в чем принципиальная разница, поменять атрибут или вновь применить класс? .. работает же ..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.10.2014, 19:37
    #38777926
SashkaBol
SashkaBol
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
carrotik,

Проблема не в том чтобы поменять аттрибут - это работает без проблем и мои и вашим способом. Проблема в отслеживании изменений чекбоксов. В первом варианте все работает, во втором, после добавления класса бутстрапа(для удобства), что-то ломается. Попробуйте запустить мой код(первый и второй сценарий), поймете о чем я.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.10.2014, 11:33
    #38778329
carrotik
carrotik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Checkbox, JavaScript, Bootstrap не могу разобраться
SashkaBolcarrotik,

Проблема не в том чтобы поменять аттрибут - это работает без проблем и мои и вашим способом. Проблема в отслеживании изменений чекбоксов. В первом варианте все работает, во втором, после добавления класса бутстрапа(для удобства), что-то ломается. Попробуйте запустить мой код(первый и второй сценарий), поймете о чем я.

... а, я понял .. вы применяете бутстраповский кнопочный стиль к чекбоксам ... по букварю бутстрапа там надо обернуть этот компонент в див и применить к нему атрибут data-toggle="buttons" .... вот так у меня, например, работает:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" id="chkOut">
Исходящие
</label>
<label class="btn btn-primary">
<input type="checkbox" id="chkIn">
Входящие
</label>
</div>



..а в скрипте проверяется их состояние как
Код: javascript
1.
2.
sOut = $( "#chkOut" ).prop( 'checked' );
sIn =  $( "#chkIn" ).prop( 'checked' );



...хотя, возможно, там еще ваш плагин/фреймворк, которым данные мапятся, как-нибудь влияет ?..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Checkbox, JavaScript, Bootstrap не могу разобраться / 11 сообщений из 11, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 351ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446625]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 54ms
get topic data:
 6ms
get forum data:
 1ms
get page messages:
 24ms
get tp. blocked users:
 1ms
others: 240ms
total:  351ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]