复选框启用只读输入不起作用

Question

Can anybody see why this is not working? It does not make the input field read only when the checkbox is not checked.

I have followed all the online advice so far and read much advice but even though I have followed what I could it does not work, however it throws no errors.

Would be great-full if anybody can see why.

<div class='div1'>

  <input type="checkbox" class='Xcheckbox' id="byname" name="searchforname" title='Search For All Listings With Sellers Name' value="sellersname" onclick="chbxX(this); <?php $extrasearch==='sellersname'; ?>" <?php if ($extrasearch==='sellersname' ): ?>  checked="checked"
  <?php endif; ?> >

  <label for="byname" class='nameheader' title='Search Date Range'>
    <b>Seller's Name</b>
  </label>

  <input type="text" id='sellersname' name="SellersName" placeholder="Sellers Name" class="sellersname" title='Type The Sellers Name' value="<?php echo $sellersname ?>">

</div>


<script>
  $(function() {

    if ($("#byname").prop('checked') == false) {
      document.getElementById("sellersname").setAttribute("readonly", true);
    } else {
      document.getElementById("sellersname").removeAttribute("readonly");
    }
  });
</script>

Answer 1

<div style="position:relative; width:fit-content; height:fit-content; float:left; clear:both; margin-top:30px;">

<input type="checkbox" class='Xcheckbox' id="byname" name="searchforname" title='Search For All Listings With Sellers Name'  value="sellersname" onclick="chbxX(this); <?php $extrasearch==='sellersname'; ?>" <?php if ($extrasearch==='sellersname'):  ?> checked="checked" <?php endif; ?> ></input>

<label for="byname" class='nameheader' title='Search Date Range' ><b>Seller's Name</b></label>

<input type="text" id='byname2' name="SellersName" placeholder="Sellers Name" class="sellersname" title='Type The Sellers Name' disabled='true' value="<?php echo $sellersname ?>"  ></input>

</div>



function chbxX(objX)
{


var that = objX;

(objX);

if(document.getElementById(that.id).checked === true) {

document.getElementById('byname').checked = false;
document.getElementById('bynumber').checked = false;
document.getElementById('bylistingid').checked = false;


document.getElementById('byname2').disabled = true;
document.getElementById('bynumber2').disabled = true;
document.getElementById('bylistingid2').disabled = true;



}
document.getElementById(that.id).checked = true;
document.getElementById(that.id+"2").disabled = false;
}

THANKS FOR YOUR HELP FOLKS. It really helped.