Question

对不起这个问题，但如果另一个文本框有值，我如何禁用文本框？我已经尝试过这段代码，但它不能正常工作，抱歉招聘问题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" />

Answer 1

如果您想使用纯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 demo

如果您已经使用了jQuery，那么您可以将上述内容嵌入到jQuery的$(document).ready(function(){ /* the code in here */});中，或者切换到仅限jQuery的解决方案，例如Alex's。

要坚持使用纯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 demo

Answer 2

你已经标记了问题jQuery，所以它就像......一样简单。

$("#downpayment").on("change paste", function() { 
                         $("#full_payment").prop("disabled", this.value.length); 
                          });

只要您的预付款中有一些内容（即使它是一个空格，如果这不是理想的，$.trim()在您检查其length属性之前的输入，那么它将启用完整付款。

Answer 3

$(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");      
        }
    });
});

当其他文本框具有值HTML时禁用文本框

3 个答案: