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 の にネストするか、 Alex の$(document).ready(function(){ /* the code in here */});などの jQuery のみのソリューションに切り替えることができます。

</body>プレーンな JavaScript に固執し、同等の DOM 対応イベントを設定する方法の説明を避けるには、HTML コンテンツの最後、終了タグの直前に次のコードを追加します。

<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 に答える