如果选中复选框，则使 input="text" 字段为必需

Question

我有一个包含两个不同地址的引导公式

第一个地址是用户的主地址，所有字段都是必需的。

第二个地址是帐单地址，如果用户选择“帐单地址复选框”，则此字段（街道、街道号码、邮政编码和城市）应为必填项。

我使用http://formvalidation.io/，但我不知道如何获取复选框和我的帐单地址输入字段之间的依赖关系。

也许有人可以帮忙？

Answer 1

您可以将 jQuery .change() 事件侦听器添加到复选框，然后在文本输入上切换 required 属性：

$(document).ready(function() {

    $('input[type="checkbox"]').change(function() {

        if ($('input[type="text"]').attr('required')) {
            $('input[type="text"]').removeAttr('required');
        } 

        else {
            $('input[type="text"]').attr('required','required');
        }

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<p><input type="checkbox" /> Check Me to make the Text Box a Required Field</p>
<input type="text" />
<input type="submit" value="Submit" />
</form>

---

这里是原生 javascript 中的相同方法，以便您可以与 jQuery 进行比较和对比：

var checkBox = document.querySelector('input[type="checkbox"]');
var textInput = document.querySelector('input[type="text"]');

function toggleRequired() {

    if (textInput.hasAttribute('required') !== true) {
        textInput.setAttribute('required','required');
    }

    else {
        textInput.removeAttribute('required');  
    }
}

checkBox.addEventListener('change',toggleRequired,false);

<form>
<p><input type="checkbox" />Check Me to make the Text Box a Required Field</p>
<input type="text" />
<input type="submit" value="Submit" />
</form>

Answer 2

您还可以检查复选框是否实际被选中，而不是在单击时。对于使用已检查字段的情况，它会更好地工作。

let toggleInputRequired = ( checkbox, input ) => {
    checkbox.addEventListener( 'change', e => {
        if ( e.currentTarget.checked )
            input.setAttribute( 'required', 'required' );
        else
            input.removeAttribute( 'required' );
    } );

    checkbox.onchange();
}

toggleInputRequired( document.querySelector( 'input[name="checkbox_name"]' ), document.querySelector( 'input[name="input_text"]' ) );