JSFiddle - React, Tailwind, and code Playground
HTML
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="checkbox">
Some Text Here
</label>
</div>
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />
CSS
* {margin: 0px; padding: 0px;}
body {background-color: rgb(248,248,248)}
#nav {
list-style:none;
}
#nav li {
float:left;
display:block;
width:100px;
position:relative;
z-index:500;
}
/* this is the parent menu */
#nav li a {
display:block;
padding:15px;
color:#000;
border: 1px solid transparent;
}
#nav li a:hover {
border: 1px solid black;
}
#nav a.open {
color:#fff;
background-color: pink;
}
#nav ul {
position:absolute;
display:none;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
}
#nav ul a {
display:block;
height:15px;
padding: 15px;
color:#666;
}
#nav ul a:hover {
text-decoration:underline;
}
.active{
background-color: pink;
}
JavaScript
$('#check').click(function(){
if(!$(this).is(':checked')){
$('#btncheck').attr("disabled","disabled");
}
else
$('#btncheck').removeAttr('disabled');
});