[CSS][HTML] nie klikalny przycisk Opcje

[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.

[HTML] pobierz, plaintext 
<a href="#step-3" type="button" class="btn btn-default btn-circle btn-primary" disabled="disabled">3</a>
[HTML] pobierz, plaintext 

[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.

Ten post edytował mortus 30.04.2017, 20:14:45

[eminiasty]

Może troche odbiegne z tematu, ale to ten sam problem i to samo zagadnienie.

Mam taki js

[PHP] pobierz, plaintext 
 allNextBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='number'],select,textarea"),
            isValid = true;
			console.log('GO');
 
 
        $(".form-group").removeClass("has-error");
        for(var i=0; i<curInputs.length; i++){
            if (!curInputs[i].validity.valid || curInputs[i].selectedIndex == 0 || curInputs[i].length > 0){
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
				console.log('ERROR');
            }
        }
 
        if (isValid){
			nextStepWizard.removeClass('disabled').trigger('click');
            nextStepWizard.removeAttr('disabled').trigger('click');
		}
		else{
			alert('Uzupełnij wszystkie pola.');
		}
    });
[PHP] pobierz, plaintext 

oraz zwykly kwalek html:

[PHP] pobierz, plaintext 
<input class="form-control" name="cosik" type="number" value="1" min="1" step="0.1" novalidate />
[PHP] pobierz, plaintext 

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.

[PHP] pobierz, plaintext 
          curInputs = curStep.find("input[type='text'],input[type='number'],select,textarea"),
[PHP] pobierz, plaintext 

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().