Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] nie klikalny przycisk
Forum PHP.pl > Forum > Przedszkole
eminiasty
Ustawilem na przycisk disable ale i tak moge wejsc w zawartość #step-3. Jak można to inaczej zablokować, żeby nie dało się wejść do tej zawartości?
Jest to część formularza krokowego.

  1. <a href="#step-3" type="button" class="btn btn-default btn-circle btn-primary" disabled="disabled">3</a>
mortus
Przecież to nie jest przycisk <button> tylko odnośnik/kotwica <a>. Może użyj bootstrap'owego stylu disabled, przy czym trzeba później obsługę w javascript zrobić.
eminiasty
Ostatnio słyszałem, że kotwicy/przekierowania nie można umieszczać w buttonach dlatego umieszczone zostało to w herf

Masz racje zastosowanie klasy bootstrapowej disabled pomaga,aczkolwiek tu jest przykład w którym nie stosują tej klasy i nie ma takiego problemu? Dlaczego?

http://bootsnipp.com/snippets/e3MBM
mortus
Fakt, ta funkcjonalność wynika z zastosowania bootstrap'a, a dokładnie stylu dla elementu .btn[disabled]. Niestety nie da się stwierdzić w czym tkwi problem, patrząc tylko na tę linijkę kodu. Trzeba całość zobaczyć "w akcji". Być może istotne jest czym jest element nadrzędny, być może gdzieś nadpisujesz wspomniany wyżej styl, a być może wystarczy wyczyścić cache (Ctrl + F5 na tej konkretnej stronie). Przyczyn może być kilka.

PS. Nie zmienia to faktu, że kod będzie niezgodny ze standardem HTML, ponieważ <a> nie może posiadać atrybutu disabled. Natomiast bootstrap'owy .btn[disabled] odpowiada również bootstrap'owemu .btn.disabled.
eminiasty
Może troche odbiegne z tematu, ale to ten sam problem i to samo zagadnienie.

Mam taki js

  1. allNextBtn.click(function(){
  2. var curStep = $(this).closest(".setup-content"),
  3. curStepBtn = curStep.attr("id"),
  4. nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
  5. curInputs = curStep.find("input[type='text'],input[type='number'],select,textarea"),
  6. isValid = true;
  7. console.log('GO');
  8.  
  9.  
  10. $(".form-group").removeClass("has-error");
  11. for(var i=0; i<curInputs.length; i++){
  12. if (!curInputs[i].validity.valid || curInputs[i].selectedIndex == 0 || curInputs[i].length > 0){
  13. isValid = false;
  14. $(curInputs[i]).closest(".form-group").addClass("has-error");
  15. console.log('ERROR');
  16. }
  17. }
  18.  
  19. if (isValid){
  20. nextStepWizard.removeClass('disabled').trigger('click');
  21. nextStepWizard.removeAttr('disabled').trigger('click');
  22. }
  23. else{
  24. alert('Uzupełnij wszystkie pola.');
  25. }
  26. });



oraz zwykly kwalek html:

  1. <input class="form-control" name="cosik" type="number" value="1" min="1" step="0.1" novalidate />


Mógłby mi ktos wytlumaczyc dlaczego ten kod sprawdza tego inputa jesli ma on nadane novalidate, a ponadto w puli sprawdzania jest wartosc numeric.
  1. curInputs = curStep.find("input[type='text'],input[type='number'],select,textarea"),


numeric startuje od 1 wiec zawsze powinien byc poprawny, a nie jest.
mortus
novalidate to atrybut formularza <form>, który wyłącza walidację całego formularza po jego zatwierdzeniu przyciskiem typu submit. Atrybut ten nie ma zastosowania w przypadku pól formularza. Natomiast find() służy tylko i wyłącznie do "odnalezienia" określonych elementów w DOM i nie sprawdza po drodze niczego. Sprawdzenia dokonujesz później w pętli for().
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.