index.html :
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="script.js"></script> -->
<script>
$(document).ready(function () {
$('.vehicle').click(function () {
if($( ".vehicle:checked" ).length > 1)
{
console.log($(".vehicle:checked" ).length)
$("#checkbox_btn").prop('disabled',false)
}
else{
$("#checkbox_btn").prop('disabled',true)
}
})
});
</script>
</head>
<body>
<div>
<input type="checkbox" class="vehicle" id="vehicle1" name="vehicle1" value="Bike" />
<label for="vehicle1"> I have a bike</label><br />
<input type="checkbox" class="vehicle" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<button id="checkbox_btn" disabled>Click me </button>
</div>
</body>
</html>
0 Comments