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

Question

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?

gontrollez · Accepted Answer · 2016-09-03T20:10:36.880

2

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) {

edited Sep 03 '16 at 20:10

answered Sep 03 '16 at 13:48

gontrollez

6,372
2
28
36

1

It will never be equal to `"true"` (string) though it may be equal to `true` (Boolean). – David Thomas Sep 03 '16 at 13:53
@DavidThomas Actually, as you know, Javscript is weakly typed, so any non empty string == true – KoreanwGlasses Sep 03 '16 at 14:05
@DavidThomas: ok, i changed the last "true" for `true`. – gontrollez Sep 03 '16 at 14:14
@gontrollez, now haven't you copied from my answer ?? – Mandeep Singh Sep 05 '16 at 06:45

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

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

//do something

}

ref: How do I uncheck a checkbox?

edited May 23 '17 at 12:16

Community

1
1

answered Sep 03 '16 at 14:01

Srijan

1

score 0 · Answer 3 · answered Sep 03 '16 at 14:08

okay here is the solution you were looking for

here is your checkbox new code

<input type="checkbox" id="freecheck" onclick="myonclickhandler(this);" name="freecheck" value="freeonly">

While this is your javasript code

<script type="text/javascript">
var t = document.getElementById("freecheck");

function myonclickhandler(t) {
    if (t.checked) {
        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";
    }
}
</script>

Hope this helps

score 0 · Answer 4 · answered Sep 03 '16 at 14:09

0

Do like following , It will work :

Change your javascript function

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

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

}

Also find working fiddle Fiddle

answered Sep 03 '16 at 14:09

Mandeep Singh

1,287
14
34

Does this answer add something to mine? You don't explain what the problem was and the solution is the same. – gontrollez Sep 03 '16 at 14:15
can't you see the diff b/w document.getElementById('freecheck').checked and document.getElementById('freecheck').checked == 'true' ?? – Mandeep Singh Sep 03 '16 at 14:17

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

4 Answers4