javascript - 当另一个文本框具有 HTML 值时禁用文本框

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 .