Current code:
<form>
<div class="form-group" id="deadline" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
<input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
<label for="ongoing">Ongoing</label>
</div>
</form>
how do i make it so that checking the "Ongoing" checkbox disables the "deadline" input field? Thanks ahead of time.
please use jQuery or javascript
<form>
<div class="form-group" id="deadline" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
<input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
<label for="ongoing">Ongoing</label>
</div>
</form>
<script>
$("#ongoing).change(function(){
if($(this).is(':checked')
{
$('#deadline').attr('disabled','disabled');
}
else{
$('#deadline').removeAttr('disabled');
}
});
<script>
Using jQuery would be easiest way in my opinion
$('#ongoing').change(function() {
if(this.checked) {
$('#deadline').prop('disabled',true);
} else {
$('#deadline').prop('disabled',false);
}
});
:)
:)you can use jQuery for this...Your code will be as follow-
$('#ongoing').change(function() {
if($(this).is(":checked")) {
$('#deadline').prop('disabled',false);
}
else
{ $('#deadline').prop('disabled',true);}
});
Add an onclick event and call a function like this: and remove id of this div <div class="form-group" id="deadline" > since you are using the same id for field.
<html>
<script>
var disabled=0;
function disableEnableField(){
if(disabled==0){ //disable
document.getElementById('deadline').disabled = true;
disabled=1;
}
else{ //enable again
document.getElementById('deadline').disabled = false;
disabled=0;
}
}
</script>
<form>
<div class="form-group" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
<input type="checkbox" value="ongoing" onclick="disableEnableField()" name="Ongoing" id="ongoing" >
<label >Ongoing</label>
</div>
</form>
</html>
The more better and quicker solution than the one provided is:
$('#ongoing').change(function() {
$('#deadline').prop('disabled', this.checked);
});
Remove or rename that form-control div to some other name.The same id name for input tag and div is conflicting and the code is looking for the first one .Thats why here no codes working.I edited accordingly.Kindly go through it.include jquery .Its important.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script>
$(function () {
$("input[name='Ongoing']").click(function () {
if ($("#ongoing").is(":checked")) {
$("#deadline").removeAttr("disabled");
} else {
$("#deadline").attr("disabled", "disabled");
}
});
});
</script>
</head>
i edited your code as required.
<body>
<form>
<div class="form-group" id="deadlinediv" >
<input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" disabled="disabled">
<input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
<label for="ongoing">Ongoing</label>
</div>
</form>
</body>
</html>
So many other ways already explained .May be this too will help somebody.
deadlinefor div asidwhich caused the issue