Esto es lo que he intentado
<a class="step_block" onClick="activar()" href="" target="_blank" rel="nofollow noreferer">
</a>
<script language="javascript">
function activar(){
document.getElement.ById('buttone').disabled = false;
}
</script>
<form action="<?php echo $result ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>
También me gustaria que fuera al clickar dos botones no uno :). Un saludo
Ahora mismo el problema de este código es que la etiqueta disabled = false no desactiva si no que sigue igual. (Da igual que pongas disabled=pepito que va a estar desactivado)
Mi codigo actual
<div class="all_steps">
<a data-clickado="false" class="step_block" href="https://www.youtube.com/channel/" target="_blank" rel="nofollow noreferer" data-clickado="false">
<div style="background-image:url('https://i.imgur.com/DhSqcGy.png')" class="step_left"></div>
<div class="step_content"><h2 style="text-align:left;">Subscribe</h2>
<p style="text-align:left;">Subscribe to <?php echo $refername; ?> to proceed.</p>
</div><div class="step_arrow"></div>
</a>
<br>
<a data-clickado="false" class="step_block" href="https://twitter.com/intent/follow?" target="_blank" rel="nofollow noreferer">
<div style="background-image:url('https://i.imgur.com/TlYkMkc.png')" class="step_left"></div>
<div class="step_content"><h2 style="text-align:left;">Follow</h2><p style="text-align:left;">Follow <?php echo $refername; ?> to proceed.</p></div><div class="step_arrow"></div></a> </div>
<br>
<form action="<?php echo $result["shortenedUrl"] ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>
<div class="card_share">
</div>
</div>
</section>
<?php
require('inc/service.php');
require('inc/footer.php');
?>
<script language="javascript">
window.addEventListener('load', () => {
// Cuando la pagina termine de cargar, anadimos los eventos a los botones.
document.querySelectorAll('a[data-clickado]').forEach(el => {
el.addEventListener('click', activar);
});
});
function activar(e){
let salir = false;
e.target.dataset.clickado = true; // Guardamos el data para saber que el boton ha sido activado
document.querySelectorAll('a[data-clickado]').forEach(el => {
if (!salir && el.dataset.clickado === 'false') {
salir = true; // En caso en que falte un boton por activar avisamos a la variable
}
});
if (!salir) document.querySelector('#buttone').disabled = false; //activamos el boton si esta todo bien
}
</script>
checkboxes
en este caso?. Escuchas cada cambio y activas el botón únicamente cuando todos estén seleccionados. Sería algo parecido al segundo fragmento de código mostrado aquí. En él se determina cuando están todos desmarcados, sería sólo cambiar la lógica a todos marcados. El problema que veo con los elementos del tipoa
es que te obliga a guardar en un atributodata
los estados del click, en cambio con uncheckbox
no haría falta. Además, con el elementoa
es complicado saber si se revertió el click...