当另一个文本框的值为HTML时禁用该文本框
Disabling a textbox when the other textbox have a value HTML
我很抱歉出现这个问题,但如果另一个文本框有值,我如何禁用该文本框??我已经尝试了这个代码,但它不起作用,很抱歉出现了问题T_T
function disable(downpayment,full_payment)
{
if ( downpayment.value.length >= 1 )
document.getElementById(full_payment).disabled = true;
else
document.getElementById(full_payment).disabled = false;
}
</script>
<input name="downpayment" id="downpayment" type="text" onselect="function disable(downpayment,full_payment);" style="width:250px" />
</p>
<p>
<input name="full_payment" id="full_payment" type="text" style="width:250px" />
如果您想使用纯JavaScript:
// finding the relevant elements *outside* the function
var downpayment = document.getElementById('downpayment'),
full_payment = document.getElementById('full_payment');
function enableToggle(current, other) {
/* 'current' is the element that currently has focus
'other' is the other input element, that does not have focus.
1. if the 'current' value of the focused/active element, once the whitespace
is removed, is greater than 0 (so it has something in it other than whitespace,
the disabled property of the 'other' element is true,
2. if the 'current' element has only whitespace, and/or a zero-length value,
the 'other' element's disabled property is false.
*/
other.disabled = current.value.replace(/'s+/,'').length > 0;
}
// using the onkeyup event to call a function on the elements.
downpayment.onkeyup = function () {
enableToggle(this, full_payment);
}
full_payment.onkeyup = function () {
enableToggle(this, downpayment);
}
这适用于以下HTML:
<input name="downpayment" id="downpayment" type="text" style="width:250px" />
<input name="full_payment" id="full_payment" type="text" style="width:250px" />
JS Fiddle演示。
如果您已经在使用jQuery,那么您可以将上面的内容嵌套到jQuery的$(document).ready(function(){ /* the code in here */});
中,或者切换到只使用jQuery的解决方案,例如Alex的解决方案。
为了坚持使用纯JavaScript,并避免解释如何设置等效的DOM就绪事件,请在HTML内容的末尾,即关闭</body>
标记之前放置以下内容:
<script>
var downpayment = document.getElementById('downpayment'),
full_payment = document.getElementById('full_payment');
function enableToggle(current, other) {
other.disabled = current.value.replace(/'s+/,'').length > 0;
}
downpayment.onkeyup = function () {
enableToggle(this, full_payment);
}
full_payment.onkeyup = function () {
enableToggle(this, downpayment);
}
</script>
(这与上面的JavaScript完全相同,去掉了注释,但封装在<script></script>
标签中)
将其放在HTML的底部意味着在尝试为元素分配事件处理程序之前,这些元素已经存在于DOM中。
顺便说一句,通过调整HTML,给出:
<form>
<!--
I associated the relevant elements with a class-name 'enableToggle',
you don't have to, it just reduces the work the jQuery has to do later
when using siblings('.enableToggle') to find the relevant elements.
-->
<div>
<label for="downpayment">Downpayment</label>
<input name="downpayment" class="enableToggle" id="downpayment" type="text" style="width:250px" />
<label for="full_payment">Full payment</label>
<input name="full_payment" class="enableToggle" id="full_payment" type="text" style="width:250px" />
</div>
</form>
可以使用以下jQuery:
// binds both event-handler to both 'keyup' and 'paste' events.
$('.enableToggle').on('keyup paste', function(){
/* 'curVal' is a Boolean (true or false) depending on whether there's
a value other than whitespace */
var curVal = $(this).val().replace(/'s+/g,'').length > 0;
/* sets the 'disabled' property of the sibling elements of the current
element, as long as those siblings have the class 'enableToggle'
(this avoids having to explicitly identify all the elements you want
to act on). */
$(this).siblings('.enableToggle').prop('disabled', curVal);
});
JS Fiddle演示。
您已经标记了问题jQuery,所以它就像…一样简单
$("#downpayment").on("change paste", function() {
$("#full_payment").prop("disabled", this.value.length);
});
一旦你的首付款中有一些内容(即使是一个空间,如果这不理想,$.trim()
是你检查其length
属性之前的输入),它就会启用全额付款。
$(document).ready(function()
{
$(".PaxHeads").on('keypress','input[name="DebitAmount"]',function()
{
var myLength = $('input[name="DebitAmount"]').val().length;
if (myLength!=0)
{
$('input[name="CreditAmount"]').attr("disabled", "disabled");
}
else
{
$('input[name="CreditAmount"]').removeAttr("disabled");
}
});
$(".PaxHeads").on('keypress', 'input[name="CreditAmount"]', function()
{
var myLength1 = $('input[name="CreditAmount"]').val().length;
if (meLength1!=0)
{
$('input[name="DebitAmount"]').attr("disabled", "disabled");
}
else
{
$('input[name="DebitAmount"]').removeAttr("disabled");
}
});
});
相关文章:
- 我收到消息“资源解释为脚本,但使用 MIME 类型文本/html 传输”
- 如何使按钮单击并更改以前显示的文本(html)
- 使用 Javascript 解析电子邮件源的文本/html 部分
- Javascript/jQuery,将CSS应用于包含特定文本/html的元素
- jQuery文本html操作,以查找大量文本中出现的字符,然后更改其颜色
- 使用 Jquery 创建具有转义文本 + HTML 的元素
- 在空节点(如文本节点)中添加文本/html
- 从网站获取特定文本 (html)
- 如何解决“资源解释为脚本但使用 MIME 类型文本/html 传输”
- 请求 JSONP 时的文本/html 输出
- 将元素添加到 DOM 给定的纯文本 HTML 中,仅使用纯 JavaScript(没有 jQuery)
- 在gmail撰写邮件区域中获取选中/突出显示的文本html
- 如何确定是否在父元素的开始或结束存在文本?HTML DOM &JavaScript
- 在输入文本html中显示格式
- 如何使纯文本html javascript
- 资源解释为脚本,但传输MIME类型文本/html javascript
- 从Javascript传递文本- HTML- PHP
- 从DOM对象中获取文本/html
- 脚本类型=“文本/ html"从文件中包含HTML
- jsFiddler.NET中的文本/HTML编辑器