Activer le bouton soumettre lorsque vous sélectionnez la case à cocher

J'ai essayer quelques exemples d'activer le bouton "soumettre" lorsque la case est cochée, mais je suis de nulle part. Ci-dessous est un de mes tentatives, où le bouton "soumettre" est désactivé jusqu'à ce que la case est cochée. S'il vous plaît laissez-moi savoir ce qui me manque.

JS:

function checked(sub1) {
  var myLayer = document.getElementById(sub1);
  var input = myLayer.childNodes[0];
  if (input.checked == true) {
    myLayer.disabled = "";
  } else {
    myLayer.disabled = "disabled";
  }
}

HTML:

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>

<p>
  <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

InformationsquelleAutor Doran L | 2015-11-28

javascript

8

Personne n'a expliqué pourquoi votre code ne fonctionne pas.

Pour un, vous ne sont pas de sélectionner le input case de l'élément correctement. Il n'est pas un nœud enfant de l'élément de bouton. Vous pouvez soit obtenir une référence à la case à cocher en passant this dans le onchange événement, ou vous pouvez passer le event objet et accéder à la case de l'élément par le biais de la event.target propriété:

Par exemple:
```
<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />
```
Ensuite, vous pouvez accéder à une référence à la case d'un élément qui a tiré sur l'événement de changement:
```
function isChecked(checkbox, sub1) {
  //checkbox
}
```
Après la modification d'un couple de choses, il ne fonctionnent pas comme prévu:
```
function isChecked(checkbox, sub1) {
    var button = document.getElementById(sub1);

    if (checkbox.checked === true) {
        button.disabled = "";
    } else {
        button.disabled = "disabled";
    }
}
```
Cependant, vous pouvez simplifier le code et de le réécrire:

Exemple
```
<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />
```
```
function isChecked(checkbox, sub1) {
    document.getElementById(sub1).disabled = !checkbox.checked;
}
```
Comme une note de côté, je vous suggère fortement d'utiliser JavaScript discret et ajouter un écouteur d'événement à l'élément dans l'ordre pour éviter inline onchange événements:

Exemple
```
document.getElementById('termsChkbx').addEventListener('click', function (e) {
  document.getElementById('sub1').disabled = !e.target.checked;
});
```
InformationsquelleAutor Josh Crozier

Voici le code complet

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

<script type = "text/javascript">
function change_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = "";
    } else {
        btn.disabled = "disabled";
    }
}
</script>

InformationsquelleAutor Furqan Aziz

Essayez comme ceci

<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
 <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

function isChecked(chk,sub1) {
    var myLayer = document.getElementById(sub1);
    if (chk.checked == true) {
        myLayer.disabled = false;
    } else {
        myLayer.disabled = true;
    };
}

PLUNKR

InformationsquelleAutor Anik Islam Abhi

Le problème majeur qui peut être facilement vérifié en utilisant le navigateur de la console de débogage. De là, vous pouvez voir immédiatement une exception.

Essayez ceci:

Html:

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx" onchange="checked('sub1', this.checked);" />
</p>
<p>
    <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

JavaScript:

function checked(sub1, checkedState) {
    document.getElementById(sub1, this).disabled = !checkedState;
}

Mais sachez, que ce bout de code n'est pas le plus pratique. Il a juste résout votre problème sans l'aide de bibliothèques comme jQuery.

InformationsquelleAutor Axel Napolitano

Essayez d'utiliser cette fonction JQuery

$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});

Exemple

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    			<input type="checkbox" id="termsChkbx" /></p>
    
    			<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script>
$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});
</script>

InformationsquelleAutor Collins Abitekaniza

0

Pendant que votre problème a été résolu, il n'y a pas besoin de JavaScript ici.
Cela peut être fait avec du pur CSS/HTML:

CSS:
```
input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}
```
HTML:
```
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>
```
J'ai utilisé le :non() pseudo-classe de détecter si une case n'est pas cochée comme c'est le w3c est l'approche recommandée. Je n'étais pas sûr de l'endroit où (en HTML) la case à cocher est dans la pertinence pour le bouton, j'ai donc utilisé le tilde (~ général sélecteur de frères) pour trouver le bouton. Si la case est immédiatement avant le bouton, je vous conseille d'utiliser le adjacent sélecteur de frères + à la place.

Cependant si vous avez plusieurs cases et vous souhaitez uniquement une case pour faire basculer l'état du bouton, puis en utilisant la :nth-of-type pseudo-classe ou un id peut être plus approprié:

CSS:
```
input[type="checkbox"]:nth-of-type(2):not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}
```
HTML:
```
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>
```
Sinon, toutes les cases seront obligatoires pour le bouton cliquez sur-mesure:

CSS:
```
input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}
```
HTML:
```
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>
```
InformationsquelleAutor jaunt

Vous devez vous connecter pour publier un commentaire.