Add/remove a class via a checkbox


#1

I have of form which allows for a file uploads, but am trying to have a checkbox which adds/removes a class (disabled)
image
Heres the HTML

					<div class="col-8">
						<div class="form-check">
						  <input class="form-check-input" type="checkbox" onClick="enableUpload()" id="defaultCheck1">
						  <label class="form-check-label" for="defaultCheck1">
						  PCR file is compliant
						  </label>
						</div>
					</div>					
					<div class="col-4">
					  <label class="btn btn-outline-secondary btn-bs-file disabled" id="attach">
					  <span class="icon-paper-clip"></span>
					  &nbsp;&nbsp;Attach a PCR file
					  <input type="file" name="file">
					  </label>
					</div>

the javascript function to be fired when the box is checked

function enableUpload() {
  // Get the checkbox
  var checkBox = document.getElementById("defaultCheck1");
  // Get the output text
  var lbl = document.getElementById("attach");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    lbl.classList.remove('disabled');
  } else {
    lbl.classList.add('disabled');
  }
}

#2

Code works fine for me as described…though you might want to use onchange instead of onclick.


#3

I changed that, still nothing seems to happen. I checked the console and

What does that mean, the function is in the <head> and in between <script> tags


#4

Is your javascript and HTML in the same file?


#5

Yes,


#6

At this point I can only suggest you put the code up in a codepen or put the page online somewhere it can be viewed, because that makes no sense…


#7

ok, when i get home