Ciao, come indicato da tampertools, puoi utilizzare disabled come selettore CSS.
Per completezza posto una soluzione pratica.
Per il submit ti consiglio di utilizzare comunque un elemento input di tipo submit.
Una volta fissate le dimensioni potrai agire, dal css, sul suo background per sostituire al volo l'immagine a seconda dello stato in cui si trova il pulsante.
Per una migliore funzionalità ti consiglio di creare un unico file immagine in cui saranno presenti i vari stati del pulsante.
Allego un file di esempio.
submit.png
Sullo stesso file avrai quindi (in questo caso) i 4 stati:
- normale
- hover
- premuto
- disabilitato
Nota che ho usato un file png per cui ho potuto impostare la trasparenza direttamente sull'immagine (ad esempio per lo stato disabilitato).
Ora ti servirà qualche riga di css e un minimo di javascript per poter abilitare/disabilitare il submit a seconda dello stato del tuo checkbox.
Qui un esempio completo da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
#submit{
background: url("submit.png") no-repeat;
width:100px;
height:30px;
border:none;
font-size:0;
color:transparent;
}
#submit:hover{
background-position:0 -30px;
}
#submit:active{
background-position:0 -60px;
}
#submit:disabled{
background-position:0 -90px;
}
</style>
</head>
<body>
<form action="#">
<label>
<input type="checkbox" onchange="document.getElementById('submit').disabled = !this.checked" >
Ho letto e accetto le condizioni
</label>
<br>
<input id="submit" type="submit" disabled>
</form>
</body>
</html>
L'immagine utilizzata per il background è la stessa che ho allegato sopra.
Noterai che nell'evento onchange del checkbox, tramite javascript, viene impostata la proprietà disabled del submit. Il valore viene dato dal "contrario" del valore che assume la proprietà checked dello stesso checkbox ogni volta che cambia stato (cioè !this.checked)
Rispondi quotando
