web-dev-qa-db-ja.com

無線がチェックされている場合は入力フィールドを必須にします

特定の無線がチェックされている場合にのみ、どういうわけか必要な属性を入力フィールドに挿入できますか？

デフォルトで入力する必要のない「ラダーメーター」という名前の入力フィールドがあります。ただし、ユーザーが「ラダー」という名前のラジオボタンをチェックする場合は、「ラダーメーター」フィールドに入力する必要があります。

私の入力は次のようになります：

<input type="text" name="ladder-meters" id="ladder-meters">

ラジオのonchangeイベントでこれを好きになるはずです

<input type="text" name="ladder-meters" id="ladder-meters" required>
javascripthtmlradio-buttononchangerequired
13
Morten Hagh

JQueryで簡単に実現：

$('#ladder').change(function () {
    if($(this).is(':checked') {
        $('#ladder-meters').attr('required');
    } else {
        $('#ladder-meters').removeAttr('required');
    }
});
13
F. Orvalho

F. Orvalhoを試してみましたが、うまくいきませんでした。

$('#ladder').change(function () {
    if(this.checked) {
        $('#ladder-meters').prop('required', true);
    } else {
        $('#ladder-meters').prop('required', false);
    }
});

それは役に立つかもしれません。構造についてはF.OrvalhoにThx

18
lordyoum
document.getElementById("ladder").addEventListener('change', function(){
    document.getElementById("ladder-meters").required = this.checked ;
})

チェックボックスがクリックされるたびに、必要な属性がチェックボックスのチェックされた属性と一致するように変更されます。この関係を逆にするには、this.checkedを!this.checkedに置き換えます。

これには、特定のプロジェクトに合わせて調整が必要になる場合があります。

これはこのチェックボックスで機能します：

<input type='checkbox' id='ladder' name='ladder' />
17
ColBeseder