javascript - Add required attribute when radio is checked - Stack Overflow

admin管理员组

文章数量:1313736

I have a set of radiobuttons called 'price'. When the '€' radio button is selected, I want to focus on a text input field and that text input field should be required. When I click another option, the requried attribute should be removed.

Is this possible through Javascript or jQuery? I found a jQuery snippet here, but it doesn't seem to be working. This is what I have now:

<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>

<label for="value_input">&euro;</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?" 
    onclick="document.getElementById('value_radio').checked=true">

<script>
    $('#value_radio').change(function () {
        if($(this).is(':checked')) {
            $('#value_input').attr('required');
        } else {
            $('#value_input').removeAttr('required');
        }
    });
</script>

<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>

JSFiddle: /

I have a set of radiobuttons called 'price'. When the '€' radio button is selected, I want to focus on a text input field and that text input field should be required. When I click another option, the requried attribute should be removed.

Is this possible through Javascript or jQuery? I found a jQuery snippet here, but it doesn't seem to be working. This is what I have now:

<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>

<label for="value_input">&euro;</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?" 
    onclick="document.getElementById('value_radio').checked=true">

<script>
    $('#value_radio').change(function () {
        if($(this).is(':checked')) {
            $('#value_input').attr('required');
        } else {
            $('#value_input').removeAttr('required');
        }
    });
</script>

<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>

JSFiddle: http://jsfiddle/fhfrzn1d/

• javascript
• required

Share Improve this question Follow edited Aug 16, 2014 at 12:47 Wouter C asked Aug 16, 2014 at 12:34 Wouter CWouter C 54322 gold badges88 silver badges2222 bronze badges 4

• 3 add ) after .is(':checked') its a major error. than proceed forward – Hushme Commented Aug 16, 2014 at 12:37
• 1 and use a better editor for coding – Hushme Commented Aug 16, 2014 at 12:40
• Thanks. However, it's still not working... and I guess I should dump Sublime Text then :p – Wouter C Commented Aug 16, 2014 at 12:46
• use sublime but u should use relevant js plugin for error testing – Hushme Commented Aug 16, 2014 at 12:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

According to this answer, you have to monitor the change on both radio inputs. So move your javascript script after the second radio.

Also there was missing a )

Fiddle updated: http://jsfiddle/fhfrzn1d/1/

$('input[name="price"]').change(function () {
    if($("#value_radio").is(':checked')) {
        $('#value_input').attr('required', true);
    } else {
        $('#value_input').removeAttr('required');
    }
});

You have two (really three) mistakes in your code.

First. The syntax is invalid. You should fix the closing brace as @Hushme remends in the ments.

First (2). Your usage of jsfiddle is invalid too. You should paste the code to the JavaScript section of the site and also enable jQuery library.

Second. $('#value_input').attr('required') is not creating an attribute; it's a getter. You should use the proper setter there:

$('#value_input').attr('required', true);

Third. The radiobutton change event is not firing when user deselects the radiobutton. So you should handle events on all the buttons:

$('input[name="price"]').change(function () { ... });

I've fixed your jsfiddle, see http://jsfiddle/fhfrzn1d/4/

本文标签： javascriptAdd required attribute when radio is checkedStack Overflow