Question

有人可以看到为什么这不起作用吗？当未选中此复选框时，它不会使输入字段只读。

到目前为止，我已经遵循了所有在线建议，并且阅读了很多建议，但是即使我遵循了我可能做的方法，也无法正常工作，但是它不会引发任何错误。

如果有人可以看到原因，那将是非常丰盛的。

class ArticleForm(ModelForm):
    class Meta:
        model = Article
        fields = '__all__'

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

感谢您的帮助。真的有帮助。

Answer 2

您只需要逆转条件：

$(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>

Answer 3

这是您可以执行的操作。我确实删除了php代码，否则下面的代码示例将无法正常运行。

使用此选项时，请确保在输入上设置初始值。因此，如果您的复选框在页面加载时未选中，请确保输入内容为只读属性集。

$(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>

Answer 4

在纯jQuery中。您可以尝试运行此代码，看看是否有帮助：

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>

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

4 个答案: