make a input field required if radio is checked

问题

Can I somehow insert the required attribute into an input field only if a certain radio is checked?

I have an input field named "ladder-meters" that is not required to be filled per default. But if the user checks a radio button that is named "ladder" the "ladder-meters" field are required to be filled.

My input looks like this:

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

and should like this at the onchange event on the radio

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

回答1:

Easy to achieve with jQuery:

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

回答2:

Tried F. Orvalho, didn't work for me, I had to use

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

It could be usefull. Thx to F. Orvalho for the structure

回答3:

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

Whenever the checkbox is clicked, the required attribute will be changed to match the checked attribute of the checkbox. To reverse this relationship, replace this.checked with !this.checked

This may need some adjustment to suit your specific project.

This will work with this checkbox:

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

来源：https://stackoverflow.com/questions/11967519/make-a-input-field-required-if-radio-is-checked

标签

javascript

html5

radio-button

onchange

required