如何通过 JQuery 查找和禁用按钮
How to find and disable a button via JQuery
我的 html 中有一个输入文本与查找按钮绑定。由于某些原因,我想禁用按钮和文本框。
我尝试了以下但没有成功。
var btn = $("#x_Id_armaster").closest(".ew-lookup-list").find(".ew-lookup-btn");
console.log(btn.length)
btn.attr("disabled");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row col-md-12 col-lg-12">
<label class="col-md-3 col-lg-3 captionstyle">
Client <i data-phrase="FieldRequiredIndicator" class="fas fa-asterisk ew-required" data-caption="FieldRequiredIndicator"></i>
</label>
<div class="col-md-9 col-lg-9">
<span id="el_s_invoice_Id_armaster">
<span></span>
<div class="input-group ew-lookup-list">
<div class="form-control ew-lookup-text" tabindex="-1" id="lu_x_Id_armaster">
Please select
</div>
<div class="input-group-append">
<button type="button" title="" class="ew-lookup-btn btn btn-default" onclick="ew.modalLookupShow({lnk:this,el:'x_Id_armaster',m:0,n:10});" ata-original-title="Lookup - Client"><i class="fas fa-search ew-icon"></i></button>
</div>
</div>
<input type="hidden" data-table="s_invoice" data-field="x_Id_armaster" data-multiple="0" data-lookup="1" data-value-separator=", " name="x_Id_armaster" id="x_Id_armaster" value="" onchange="ew.updateOptions.call(this);">
</span>
</div>
</div>
你可以这样做:
$('#x_Id_armaster .ew-lookup-btn').attr("disabled", true);
解释:
考虑到您的标记,$("#x_Id_armaster").closest(".ew-lookup-list").find(".ew-lookup-btn");
非常繁重且错误。只使用 '#x_Id_armaster .ew-lookup-btn'
作为选择器会更快更简单。
attr 方法需要第二个参数,例如
.attr("disabled", true)
这是不使用 jQuery 的方法:
document.querySelector('#x_Id_armaster .ew-lookup-list').disabled = true;
closest
正在向上遍历其在 DOM 树中的祖先,因此这就是您的代码失败的原因。
您可以使用 closest
和 row
class 来查找按钮。它们是相同的层次结构并且 closest
有效。
var btn = $("#x_Id_armaster").closest(".row").find(".ew-lookup-btn");
console.log(btn.length)
btn.prop("disabled", true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row col-md-12 col-lg-12">
<label class="col-md-3 col-lg-3 captionstyle">
Client <i data-phrase="FieldRequiredIndicator" class="fas fa-asterisk ew-required" data-caption="FieldRequiredIndicator"></i>
</label>
<div class="col-md-9 col-lg-9">
<span id="el_s_invoice_Id_armaster">
<span></span>
<div class="input-group ew-lookup-list">
<div class="form-control ew-lookup-text" tabindex="-1" id="lu_x_Id_armaster">Please select</div>
<div class="input-group-append">
<button type="button" title="" class="ew-lookup-btn btn btn-default" onclick="ew.modalLookupShow({lnk:this,el:'x_Id_armaster',m:0,n:10});" ata-original-title="Lookup - Client"><i class="fas fa-search ew-icon"></i></button>
</div>
</div>
<input type="hidden" data-table="s_invoice" data-field="x_Id_armaster" data-multiple="0" data-lookup="1" data-value-separator=", " name="x_Id_armaster" id="x_Id_armaster" value="" onchange="ew.updateOptions.call(this);">
</span>
</div>
</div>
我的 html 中有一个输入文本与查找按钮绑定。由于某些原因,我想禁用按钮和文本框。
我尝试了以下但没有成功。
var btn = $("#x_Id_armaster").closest(".ew-lookup-list").find(".ew-lookup-btn");
console.log(btn.length)
btn.attr("disabled");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row col-md-12 col-lg-12">
<label class="col-md-3 col-lg-3 captionstyle">
Client <i data-phrase="FieldRequiredIndicator" class="fas fa-asterisk ew-required" data-caption="FieldRequiredIndicator"></i>
</label>
<div class="col-md-9 col-lg-9">
<span id="el_s_invoice_Id_armaster">
<span></span>
<div class="input-group ew-lookup-list">
<div class="form-control ew-lookup-text" tabindex="-1" id="lu_x_Id_armaster">
Please select
</div>
<div class="input-group-append">
<button type="button" title="" class="ew-lookup-btn btn btn-default" onclick="ew.modalLookupShow({lnk:this,el:'x_Id_armaster',m:0,n:10});" ata-original-title="Lookup - Client"><i class="fas fa-search ew-icon"></i></button>
</div>
</div>
<input type="hidden" data-table="s_invoice" data-field="x_Id_armaster" data-multiple="0" data-lookup="1" data-value-separator=", " name="x_Id_armaster" id="x_Id_armaster" value="" onchange="ew.updateOptions.call(this);">
</span>
</div>
</div>
你可以这样做:
$('#x_Id_armaster .ew-lookup-btn').attr("disabled", true);
解释:
考虑到您的标记,$("#x_Id_armaster").closest(".ew-lookup-list").find(".ew-lookup-btn");
非常繁重且错误。只使用 '#x_Id_armaster .ew-lookup-btn'
作为选择器会更快更简单。
attr 方法需要第二个参数,例如
.attr("disabled", true)
这是不使用 jQuery 的方法:
document.querySelector('#x_Id_armaster .ew-lookup-list').disabled = true;
closest
正在向上遍历其在 DOM 树中的祖先,因此这就是您的代码失败的原因。
您可以使用 closest
和 row
class 来查找按钮。它们是相同的层次结构并且 closest
有效。
var btn = $("#x_Id_armaster").closest(".row").find(".ew-lookup-btn");
console.log(btn.length)
btn.prop("disabled", true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row col-md-12 col-lg-12">
<label class="col-md-3 col-lg-3 captionstyle">
Client <i data-phrase="FieldRequiredIndicator" class="fas fa-asterisk ew-required" data-caption="FieldRequiredIndicator"></i>
</label>
<div class="col-md-9 col-lg-9">
<span id="el_s_invoice_Id_armaster">
<span></span>
<div class="input-group ew-lookup-list">
<div class="form-control ew-lookup-text" tabindex="-1" id="lu_x_Id_armaster">Please select</div>
<div class="input-group-append">
<button type="button" title="" class="ew-lookup-btn btn btn-default" onclick="ew.modalLookupShow({lnk:this,el:'x_Id_armaster',m:0,n:10});" ata-original-title="Lookup - Client"><i class="fas fa-search ew-icon"></i></button>
</div>
</div>
<input type="hidden" data-table="s_invoice" data-field="x_Id_armaster" data-multiple="0" data-lookup="1" data-value-separator=", " name="x_Id_armaster" id="x_Id_armaster" value="" onchange="ew.updateOptions.call(this);">
</span>
</div>
</div>