当另一个文本框的值为HTML时禁用该文本框

Disabling a textbox when the other textbox have a value HTML

本文关键字:文本 HTML 另一个      更新时间:2023-09-26

我很抱歉出现这个问题,但如果另一个文本框有值,我如何禁用该文本框??我已经尝试了这个代码,但它不起作用,很抱歉出现了问题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");      
        }
    });
});