John Smith John Smith - 3 months ago 6
HTML Question

Why is it not possible to uncheck this checkbox once clicked?

I'm currently trying to use the following code within a form on my website

<p class="formtag">Minimum Price: </p>
<input type="number" style="width: 50px; margin-right: 15px;" name="minprice" id="minprice">
<p class="formtag">Maximum Price: </p>
<input type="number" style="width: 50px; margin-right: 15px;" name="maxprice" id="maxprice">


<p class="formtag">Show Only Free Resources </p>
<input type="checkbox" id="freecheck" onchange="disableprice()" name="freecheck" value="freeonly">


Combined with the following JavaScript

function disableprice() {
if(document.getElementById('freecheck').checked = "true") {
document.getElementById('minprice').value = "";
document.getElementById('minprice').disabled = "disabled";
document.getElementById('maxprice').value = "";
document.getElementById('maxprice').disabled = "disabled";
}

else {
document.getElementById('minprice').disabled = "false";
document.getElementById('maxprice').disabled = "false";
}

}


The idea is that if the checkbox is checked, the input fields for the maximum and minimum price are disabled, otherwise they should be editable.

The issue I am having is that once the checkbox has been checked by the user, it cannot be unchecked. I'm currently struggling to work out why this is, but I'm beginning to suspect that it has something to do with my use of the code
document.getElementById('freecheck').checked = "true"
.

Can anyone please advise me on how to fix this issue?

Answer

You're assigning the value "true" to checked, and then checking its value, so it always will be true:

if(document.getElementById('freecheck').checked = "true") {

This is an assign, it should be a comparison with 2 equal signs. Also, as stated by @DavidThomas the checked attribute is boolean so you should check for boolean true value:

if(document.getElementById('freecheck').checked == true) {

or

if(document.getElementById('freecheck').checked) {