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

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>

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

You just need to inverse your condition:

$(function() {
  /* event handler added just for debugging purpose  */
  $('#byname').on('change', function(e) {
    $('#sellersname').prop('readonly', !$("#byname").prop('checked'));
  });
});

#sellersname[readonly]{
  background-color:#ccc;
  border-width:1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='div1'>
  <input type="checkbox" class='Xcheckbox' id="byname" name="searchforname" title='Search For All Listings With Sellers Name' value="sellersname" />
  <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' />

</div>

</div>

Here's how you can do this. I did remove the php code else the below code example would not be able to run properly.

When using this, make sure you set the initial value on the input. So if your checkbox will be unchecked on page load, make sure the input as a readonly attribute set.

$(function() {
  $('input[type="checkbox"]').on('click', function() {
    if ($("#byname").prop('checked') == false) {
      $("#sellersname").prop('readOnly', true);
    } else {
      $("#sellersname").prop('readOnly', false);
    }
  });
});

input:-moz-read-only {
  /* For Firefox */
  background-color: #ccc;
}

input:read-only {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='div1'>

  <input type="checkbox" class='Xcheckbox' id="byname" name="searchforname" title='Search For All Listings With Sellers Name' value="sellersname">

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

  <input type="text" id='sellersname' readonly name="SellersName" placeholder="Sellers Name" class="sellersname" title='Type The Sellers Name' value="Donna">

</div>

</div>

In pure jQuery. You can try to run this code and see if it helps:

function clickFunction(){
    
    $("input").on("click", function () {

        if ($("#byname").prop("checked") == false){
            $("#sellersname").attr("readonly", true);
        }

        else {
            $("#sellersname").removeAttr("readonly");
        }
    });
    
}


$(function (){
    clickFunction();        
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="div1">

<input type="checkbox" class="Xcheckbox" id="byname" name="searchforname" title="Search For All Listings With Sellers Name"  value="sellersname"></input>

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

</div>

</div>