1

我很抱歉这个问题，但是如果另一个文本框有值，我怎么能禁用一个文本框？我已经尝试过这段代码，但它不起作用，抱歉这个菜鸟问题 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" />
4

3 回答 3

2

如果您想继续使用纯 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 小提琴演示。

如果您已经在使用 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 小提琴演示。

于 2013-02-04T02:19:01.380 回答
1

您已经标记了问题 jQuery，所以它就像...

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

只要您的首付中有一些内容（即使是空格，如果不理想，$.trim()请在检查其length属性之前输入），然后它将启用全额付款。

于 2013-02-04T02:09:12.980 回答
0 
$(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");      
        }
    });
});
于 2013-03-16T07:11:47.357 回答