如何禁用和重新启用带有滑块样式复选框的提交类型按钮?

Question

我目前有一些问题，如何禁用和启用一个提交类型button与滑块checkbox。

function check() {
var ele = document.getElementsById('check');
var flag = 0;
for (var i = 0; i < ele.length; i++) {
if (ele[i].checked) {
flag = 1;
}
}
if (flag === 1) {
document.getElementByClass('valider').disabled = "enabled";
} else {
document.getElementByClass('valider').disabled = "disabled";
}
}

/* Button CSS */
.valider {
float: right;
padding: 12px 20px;
margin-top: 1%;
cursor: pointer;
border: 2px solid white;
border-radius: 4px;
color: white;
background-color: #24c238;
}
.valider:hover {
border: 2px solid #24c238;
color: #24c238;
background-color: white;
}
.valider:disabled {
cursor: default;
border-color: #999;
color: #999;
background-color: #4d7d52;
}
/* Slider CSS */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #24c238;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

<div class="formulaire">
<form action="./signCheck.php" method="GET">
<h3>Inscrivez-vous</h3>
<div class="ligne">
<div class="col25">
<label for="nom"><i class="fas fa-user"></i> Nom<text class="obligatoire">*</text></label>
</div>
<div class="col75">
<input type="text" id="nom" name="nom" placeholder="ex: Martin">
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="prenom"><i class="fas fa-user"></i> Prénom<text class="obligatoire">*</text></label>
</div>
<div class="col75">
<input type="text" id="prenom" name="prenom" placeholder="ex: Pierre">
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="motDePasse"><i class="fas fa-unlock-alt"></i> Mot de Passe<text class="obligatoire">*</text></label>
</div>
<div class="col75">
<input type="password" id="mdp" name="mdp" placeholder="Maximum 12 caractères" maxlength="12">
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="motDePasse"><i class="fas fa-unlock-alt"></i> Confirmer Mot de Passe<text class="obligatoire">*</text></label>
</div>
<div class="col75">
<input type="password" id="cMdp" name="cMdp" placeholder="************" maxlength="12">
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="telephone"><i class="fas fa-phone-alt"></i> Téléphone<text class="obligatoire">*</text></label>
</div>
<div class="col75">
<input type="text" id="tel" name="tel" placeholder="ex: 0602215684" maxlength="10">
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="mail"><i class="fas fa-at"></i> Adresse email</label>
</div>
<div class="col75">
<input type="text" id="email" name="email" placeholder="ex: [e-mail]">
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="typeCompte"><i class="fas fa-info-circle"></i> Statut</label>
</div>
<div class="col75">
<select id="typeCompte" name="typeCompte">
<option value="S">Stagiaire</option>
<option value="P">Partenaire</option>
<option value="E">Employeur</option>
</select>
</div>
</div>
<div class="ligne">
<div class="col25">
<label for="confidential" style="font-size: 40%">En vous inscrivant, vous acceptez nos <a href="#">politiques de confidentialité</a></label>
<label style="color: white; font-size: 40%;">* champs obligatoires</label>
</div>
<div class="col75">
<label class="switch">
<input type="checkbox" id="check" onclick="check()"><span class="slider"></span>
</label>
</div>
<div class="ligne">
<button class="valider" id="submitbtn" type="submit" formaction="./signCheck" formmethod="get" disabled>
<i class="fas fa-sign-in-alt"></i> S'inscrire
</button>
</div>
</div>
</form>
<div style="font-size: 50%">Déjà un compte ? <a href="connexion">Connectez-vous</a></div>
</div>

但是什么都不起作用，我设法很容易地禁用了按钮，但我没有成功地启用它。

有什么建议可以帮我弄明白吗?

Answer 1

他们试图像下面这样改变你的检查功能:

<script>
function check() {
var ele = document.getElementById('check');
var flag = 0;
if (ele.checked) {
flag = 1;
}else{
flag = 0;
}
if (flag == 1) {
document.getElementsByClassName('valider')[0].disabled = true;
} else {
document.getElementsByClassName('valider')[0].disabled = false;
}
} 
</script>

并更改HTML中的以下行:

<button class="valider" type="submit" formaction="./signCheck" formmethod="get" disabled><i class="fas fa-sign-in-alt"></i> S'inscrire</button>

disabled with not equal.

希望能帮到你!

Answer 2

disabled为布尔属性。因此，只要HTMLElement设置了disabled属性(除了false之外的任何值)，它就被禁用了。要重新启用元素，你必须完全删除disabled属性或将其显式设置为false

此外，由于用于转换的所有元素都具有id，因此通过此id而不是类名更容易找到它们，因为它不会返回元素列表，而只返回单个元素。

function check() {
var ele = document.getElementById('check');
if (ele.checked) {
document.getElementById('submitbtn').disabled = false;
} else {
document.getElementById('submitbtn').disabled = true;
}
}

Answer 3

你的代码中有相当多的错误:

HTML

你有一个额外的结束双引号按钮class属性:

<button class="valider"" type="submit" formaction="./signCheck" formmethod="get" disabled><i class="fas fa-sign-in-alt"></i> S'inscrire</button>

应:

<button class="valider" type="submit" formaction="./signCheck" formmethod="get" disabled="disabled"><i class="fas fa-sign-in-alt"></i> S'inscrire</button>

JS

1. 函数名是getElementById()，不是getElementsById()(带's'):

var ele = document.getElementsById('check');

应:

var ele = document.getElementById('check');

2. getElementById()返回单个元素，因此整个块

for (var i = 0; i < ele.length; i ++) {
if (ele[i].checked) {
flag = 1;
}
}

没有意义

3. 因为点(2)，检查if (flag === 1)没有意义(也不像你想的那样工作)

if (flag === 1)

应:

if (ele.checked)

4. 函数是getElementsByClassName()(带's')，而不是getElementByClass()，并返回一个集合。无论如何，由于每个表单应该只有一个提交按钮，因此为其分配id并将getElementById()作为目标会更有意义。

5. disabled是一个布尔属性，所以你不应该从"disabled";enabled"但你应该添加或删除它。

document.getElementByClass('valider').disabled = "enabled";

和

document.getElementByClass('valider').disabled = "disabled";

应:

document.getElementById('submitbtn').removeAttribute("disabled");

和

document.getElementById('submitbtn').setAttribute("disabled", true);

把这些放在一起，你得到:

function check() {
var ele = document.getElementById('check');
if (ele.checked) {
document.getElementById('submitbtn').removeAttribute("disabled");
} else {
document.getElementById('submitbtn').setAttribute("disabled", true);
}
}

/* Button CSS */
.valider {
float: right;
padding: 12px 20px;
margin-top: 1%;
cursor: pointer;
border: 2px solid white;
border-radius: 4px;
color: white;
background-color: #24c238;
}
.valider:hover {
border: 2px solid #24c238;
color: #24c238;
background-color: white;
}
.valider:disabled {
cursor: default;
border-color: #999;
color: #999;
background-color: #4d7d52;
}

/* Slider CSS */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #24c238;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

<div class="col75">
<label class="switch">
<input type="checkbox" id="check" onclick="check()"><span class="slider"></span>
</label>
</div>
<div class="ligne">
<button class="valider" id="submitbtn" type="submit" formaction="./signCheck" formmethod="get" disabled>
<i class="fas fa-sign-in-alt"></i> S'inscrire
</button>
</div>