如何添加属性“;“必需”;基于Javascript/Jquery中的无线电选择

How to add the the attribute "required" based on radio selection in Javascript/Jquery

本文关键字：Javascript Jquery 选择 无线电 基于 必需 何添加 添加 属性      更新时间：2023-09-26

我正在尝试创建一个表单，该表单根据零件无线电选择动态更改其所需字段。

因此，一个人选择了他们希望通过无线电联系的方式：

<label><input type="radio" name="contactPref" id="SMS" value="SMS"/>SMS</label>
<label><input type="radio" name="contactPref" id="Twitter" value="Twitter" />Twitter</label>
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone"/>
<label for="twitterName">Twitter:</label>
<input type="text" name="twitterName" id="twitterName"/>

根据他们决定的是他们喜欢的接触方式。选择字段后，相应的文本框应成为必填字段。例如：如果选择了SMS单选字段，则必须填写"电话号码"文本框，而其他字段则可以选择填写。如果用户选择了Twitter电台，则Twitter名称文本框将成为必填字段。

这是我的jsfiddle.net/olordro/q7Cxs

我的关键问题是调用元素和属性以及它的语法

提前感谢！

$('[name="contactPref"]').on('change', function() {
    var isSMS = this.value=='SMS';
    $('#phone').prop('required', isSMS);
    $('#twitterName').prop('required', !isSMS);
});

FIDDLE

使用jQuery，

$("#SMS").change(function () {
    if ($(this).is(':checked')) {
        $("#phone").attr("required", "required");
        $("#twitterName").removeAttr("required");
    }

});
$("#Twitter").change(function () {
    if ($(this).is(':checked')) {
        $("#twitterName").attr("required", "required");
        $("#phone").removeAttr("required");
    }

});

检查这个小提琴

只需注意

*

"中不支持标记的必需属性Internet Explorer 9及更早版本，或Safari。"

*

相关文章：