Add/remove a class via a checkbox

JavaScript
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

image
image901×279 5.89 KB

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

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.