複選框以登錄前同意

Question

這是我第一次使用HTML，並希望合併一個複選框，將啓用或禁用「登錄」按鈕，如果用戶不勾選複選框同意並啓用按鈕，當框是蜱。

<td> 
 
    <input style="width: 80px" name="username" type="text" value="$(username)" /> 
 
</td> 
 
</tr> 
 
<tr> 
 
    <td align="right" class="style6">Password</td> 
 
    <td> 
 
    <input style="width: 80px" name="password" type="password" /> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td>&nbsp;</td> 
 
    <td> 
 
    <input type="submit" name="submit" value="Login" /> 
 
    </td> 
 
</tr> 
 
</table> 
 

 

 
<div class="notice" style="color: #c1c1c1; font-size: 12px"> 
 
    <br /> 
 
    <input type="checkbox" name="checkbox" value="check" id="agree" />I agree to the statement above. 
 
    <br /> 
 
</div>

Answer 1

只需添加the required attribute。

<form> 
 
    <input type="checkbox" name="1" value="1" required> 
 
    <input type="submit"> 
 
</form>

Answer 2

您可以使用一些JavaScript這樣做：

<input type="checkbox" name="checkbox" value="check" id="agree" onclick="if(this.checked){ document.getElementById('login').disabled=true; }else{ document.getElementById('login').disabled=false; }" /> 

你只需要提供一個ID，以您的提交按鈕！

Answer 3

，如果你想用JavaScript你可以（在我看來這是更好地利用@Quention解決方案）試試這個做

document.getElementById("submit").disabled = true; 
 

 
function agree() { 
 
    if (document.getElementById('agree').checked) { 
 
    document.getElementById("submit").disabled = false; 
 
    } else { 
 
    document.getElementById("submit").disabled = true; 
 
    } 
 
}

<td><input style="width: 80px" name="username" type="text" value="$(username)" required/></td> 
 
    </tr> 
 
    <tr> 
 
    <td align="right" class="style6">Password</td> 
 
    <td><input style="width: 80px" name="password" type="password"/></td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 

 
    <td><input id="submit" type="submit" name="submit" value="Login" /></td> 
 
    </tr> 
 
    </table> 
 

 

 
    <div class="notice" style="color: #c1c1c1; font-size: 12px"><br /> 
 
    <input type="checkbox" name="checkbox" value="check" id="agree" onclick="agree()" required/> I agree to the statement above. 
 
    <br q v/> 
 
    </div>