Question

我有一个bootstrap公式，包括两个不同的地址

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

第二个地址是帐单邮寄地址，如果用户选中＆＃34;结算地址复选框＆＃34;，则需要此字段（街道，街道号码，邮政编码和城市）。

我与http://formvalidation.io/合作，但我不知道如何获得复选框与我的结算地址输入字段之间的依赖关系。

也许有人可以提供帮助？

Answer 1

您可以向复选框添加jQuery if test1: print(x if test2 else y)事件侦听器，然后切换文本输入上的.change()属性：

＆＃13;

required

＆＃13;

$(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');
        }

    });

});

＆＃13;

以下是本机javascript中的相同方法，以便您可以与jQuery进行比较和对比：

＆＃13;

<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>

＆＃13;

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);

＆＃13;

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"]' ) );

输入=＆＃34;文字＆＃34;如果选中复选框，则必填字段

2 个答案: