JSFiddle - React, Tailwind, and code Playground

HTML

<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">

JavaScript

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;
    }

}