Szeretném megváltoztatni a CSS mozgáskorlátozottak jelölőnégyzetek egy rács (azok túl nehéz belátni, hogy a felhasználók számára). Mi egy egyszerű módja ennek?
Én inkább az alkalmazott technológiák (csökkenő sorrendben):
CSS
JavaScript
jQuery
Egyéb
Ive volt jó szerencse néhány JS könyvtárak hogy ezt a munkát. Megadott én követelmény volt, hogy a dobozok meg nagyon eltér a hagyományos négyzetet. A következő könyvtár még 508 kompatibilis.
Alapvetően meg kell csatolni onclick esemény div, p, vagy bármely más elemet használt rács, majd transzfer az ellenőrzött értéket rejtett elem társul, hogy a területen egy rács. ami nagyon triviális, ha javascript használják - ellenőrizze jquery hozzá onclick esemény bármely elemét. Ha rákattint, beállított érték = 1 rejtett eleme.
Azt javaslom, megváltoztatja a színét a háttér (az background-colora forma / fieldset), és nézd meg, hogy felér egy jobb kontraszt. Ha csak azt, hogy változtatni a színét a fogyatékos (nem választható?) Négyzeteket kipróbálhatja:
input[disabled] {
...
/* CSS here */
...
}
De ha ők fogyatékkal okból, biztosan nem kell jól látható? A cél az, hogy mivel szürke-out, biztosan, hogy a félreértések elkerülése végett az aktív / inaktív engedélyezett és / fogyatékkal formaelemekkel?
input:disabled {}működik minden böngésző kivételével-kitaláltad-IE. IE, azt hiszem, akkor meg kell használni néhány JS könyvtárat.
Tartsa a jelölőnégyzetet bejelöli, de majd hozzáadjuk onfocus=this.blur()a négyzetet, így nem lehet kattintani.
Vagy ha a ASP.net (ahogy mondod a megjegyzést) tartsa be a jelölőnégyzetet beállítva engedélyezett és adja hozzá a következő a Page.Load eseményt:
CheckBox1.Attributes.Add("onclick", "return false;");
Ha van egy űrlapot vegyesen engedélyezett és tiltott jelölőnégyzeteket, amelyek a fogyatékkal négyzeteket elhalványult megszünteti a zavart a felhasználó számára. Ha a szándék, hogy megjelenjen a néző csak oldalra négyzetet (pl. Mutatni termék opciók kiválasztott vásárlási nyugta), majd cseréje jelölőnégyzetet input elemek képekkel tehetik jobb eredményeket.
Cserélje
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
val vel
<img src="unchecked.gif">
<img src="checked.gif">
Tulajdonképpen egy kis CSS3 akkor gúnyolni egy nagyon leegyszerűsített megoldás. Mindig meg kell vizsgálni, hogy milyen támogatást kíván nyújtani. De ha rendben vannak vele dolgozó modern böngésző, csak adja meg a go.
Íme a HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Itt a CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
És itt van a DEMO http://jsfiddle.net/DyjmM/