[ EmmaR @ 15.06.2015. 10:10 ] @
Već par dana se umorih pokušavajući da formatiram checkbox kontrolu: dinamimčka promena veličine (JavaScript/jQuery, treba da prati okolni sadržaj) i promena boje (ovo se kasnije ne menja).
Jedino što sam pronašla za promenu veličine jeste:
Code:
/*CSS*/ transform: scale(n,m);

a za promenu boje i velilčine korišćenje slika umesto checkbox/radio kontrola, što pokušavam da izbegnem.
Postoji li neki drugi način?
[ EmmaR @ 17.06.2015. 14:41 ] @
Citat:
EmmaR: Već par dana se umorih pokušavajući da formatiram checkbox kontrolu: dinamimčka promena veličine (JavaScript/jQuery, treba da prati okolni sadržaj) i promena boje (ovo se kasnije ne menja).
Jedino što sam pronašla za promenu veličine jeste:
Code:
/*CSS*/ transform: scale(n,m);

a za promenu boje i velilčine korišćenje slika umesto checkbox/radio kontrola, što pokušavam da izbegnem.
Postoji li neki drugi način?




Nasla sam:
Code:

<html><head>
<style>
input[type='checkbox'] { display: none; }
label {margin-right:20px}
label:before, input[type="checkbox"]+label:before { content: 'NE';
display: inline-block; padding-right: 10px; font-size: 18pt; font-weight: bold; color: red;
}
label.novoo:before, input[type="checkbox"]:checked+label:before  { content: 'DA'; color: pink; }
</style>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("label").click(function(){
        $(this).toggleClass("novoo");        
    });     
}); 
</script>
</head>
<body>
<h1>forma</h1>
<form id="forma">
<input type="checkbox" id="ch1" value="ch1" checked="checked" /><label id="l1" for="ch1" > Oznaka 1 </label>
<input type="checkbox" id="ch2" value="ch2"/><label id="l2" for="ch2"> Oznaka 2 </label>
</form>
</body></html>

Ovo je gruba verzija koja radi. Ali, ne i u IE8 jer ne podrzava CSS3 :checked

Na pragu sam resenja ali ne znam kako ovo da pravilno napisem:
Code:

$("input").each(function(){
        if(!$(this).attr("checked")) {
            $( this+label ).addClass("staro"); //probano: this+'label', '+label', 'this+label', this'+label'                    
        }
        else {
            $("label").addClass("novoo");
        }
});


Sta sada?

i, ovo sam resila:
Code:

//nacin 1
$("#"+$(this).attr("id")+"+label").addClass("cssclass");
//nacin 2
$(this).next("label").addClass("cssclass");


[Ovu poruku je menjao EmmaR dana 17.06.2015. u 16:18 GMT+1]
[ agvozden @ 18.06.2015. 09:54 ] @
probaj
$( 'label', this )
[ EmmaR @ 19.06.2015. 20:22 ] @
Citat:
agvozden: probaj
$( 'label', this )


Ne, ovo radi ispravno samo u slucaju da ni jedno dugme nije unapred cekirano.
Mada, s druge strane, s obzirom da imam samo jedan checkbox koje nije default oznacen i ovo bi doslo u obzir. A ja ovo odbacila u startu: eto sta se desi kad me iznervira IE8, a bez njega i to samo primenom CSS-a savrseno je radilo.