make a input field required if radio is checked

Question

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>

Henze

Answer 1

Easy to achieve with jQuery:

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

Ciscaucasia

Used this! Works as intended :) Thanks! – Henze

Seven convoluted lines of jQuery will always beat 3 lines of plain ol' javascript. Note to self: must included more libraries. – Distich

@Distich - 3 lines of plain JavaScript that won't work in old versions of IE. It will increase in line count as you add in feature detects for addEventListener and then add the attachEvent version. Having said that, there is no mention of jQuery in the question, so there shouldn't really have been any jQuery answers. – Liturgist

why do i got Uncaught TypeError: mycheckbox.is is not a function? – Markettamarkey

a bracket is missing in this code on line 2. after (':checked') add ) bracket – Hiatus

The code is missing a parenthesis: if($(this).is(":checked")) { – Steamy

Answer 2

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

Distich

Answer 3

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

Diapason