选中单选时添加必需属性

Question

我有一组名为“价格”的单选按钮。 当选择“€”单选按钮时，我要专注于文本输入字段，并且该文本输入字段是必需的。 当我单击另一个选项时，应删除必需的属性。

通过Javascript或jQuery是否可行？ 我在这里找到了一个jQuery代码段，但是它似乎没有用。 这就是我现在所拥有的：

<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.net/fhfrzn1d/

Answer 1

根据此答案 ，您必须监视两个无线电输入的变化。 因此，在第二个广播之后移动您的JavaScript脚本。

也缺少了)

小提琴更新： http : //jsfiddle.net/fhfrzn1d/1/

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

Answer 2

您的代码中有两个（实际上是三个）错误。

第一。 语法无效。 您应按照@Hushme在注释中的建议来固定右括号。

第一（2）。 您对jsfiddle的使用也无效。 您应该将代码粘贴到站点的JavaScript部分，并启用jQuery库。

第二。 $('#value_input').attr('required')没有创建属性； 这是吸气剂 。 您应该在此处使用适当的设置器：

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

第三。 当用户取消选择单选按钮时，不会触发单选按钮更改事件。 因此，您应该处理所有按钮上的事件：

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

我已经修复了您的jsfiddle，请参见http://jsfiddle.net/fhfrzn1d/4/