Jquery “设置引导”；“必需”；仅当选中特定单选按钮时，文本区域上的属性_Jquery_Twitter Bootstrap_Textarea_Requiredfieldvalidator

Jquery “设置引导”；“必需”；仅当选中特定单选按钮时，文本区域上的属性

jquery twitter-bootstrap

Jquery “设置引导”；“必需”；仅当选中特定单选按钮时，文本区域上的属性,jquery,twitter-bootstrap,textarea,requiredfieldvalidator,Jquery,Twitter Bootstrap,Textarea,Requiredfieldvalidator,这是我在这里的第一篇文章，我对所有这些都是业余爱好者，所以请耐心听我说根据单选按钮的选择（3个单选按钮，所以3个假设的textarea），我确实使用Jquery显示了一个textarea 我确实对它们设置了bootstrap“required”属性，但由于3个框中只显示了1个，我无法验证表单，因为另外2个框是空的您知道如何仅在显示的（活动的）文本区域上使用引导或Jquery启用此属性吗谢谢你的帮助代码如下： <div class="form-row"> <di

这是我在这里的第一篇文章，我对所有这些都是业余爱好者，所以请耐心听我说

根据单选按钮的选择（3个单选按钮，所以3个假设的textarea），我确实使用Jquery显示了一个textarea

我确实对它们设置了bootstrap“required”属性，但由于3个框中只显示了1个，我无法验证表单，因为另外2个框是空的

您知道如何仅在显示的（活动的）文本区域上使用引导或Jquery启用此属性吗

谢谢你的帮助

代码如下：

<div class="form-row">
    <div class="col-md-12 mb-3">
        <label for="type_demande">Request type</label>

        <div class="custom-control custom-radio form-control-sm">
            <input type="radio" id="besoin_hw_remplacement" name="request_type" class="custom-control-input" value="hw_remplacement" required="" />
            <label class="custom-control-label" for="besoin_hw_remplacement">Replace X</label>
        </div>
        <div class="custom-control custom-radio form-control-sm">
            <input type="radio" id="besoin_sw_remplacement" name="request_type" class="custom-control-input" value="sw_remplacement" required="" />
            <label class="custom-control-label" for="besoin_sw_remplacement">Replace Y</label>
        </div>                      
    </div>
</div>  

<div class="form-group" id="hw_remplacement_details" style="display:none">
    <label for="details_projet">Replace X</label>
    <textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details X..." required="" /></textarea>
    <div class="invalid-feedback">
        Please give details
    </div>
</div>

<div class="form-group" id="sw_remplacement_details" style="display:none">
    <label for="details_projet">Replace Y</label>
    <textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details Y" required="" /></textarea>
    <div class="invalid-feedback">
        Please give details
    </div>
</div>  

<script type="text/javascript">
    $("input[name='request_type']:radio")
    .change(function() {
        $("#hw_remplacement_details").toggle($(this).val() == "hw_remplacement");
        $("#sw_remplacement_details").toggle($(this).val() == "sw_remplacement"); 
});
</script>


请求类型
替换X
替换Y
替换X
请详细说明
替换Y
请详细说明
$（“输入[name='request\u type']：无线电”）
.change（函数（）{
$（“#hw#u remplacement_details”）。切换（$（this.val（）==“hw#u remplacement”）；
$（“#sw#u remplacement_details”）。切换（$（this.val（）==“sw#u remplacement”）；
});

如果您正在使用jquery验证插件，那么你用“忽略”


Javascript测试
选择1
选择2
选择3

var options=document.querySelectorAll（“[name=option]”）；
console.log（options.length）；
对于（var i=0；i，这里有一个解决方案，根据您的代码进行调整：

$（“输入[name='request\u type']：无线电”）
.change（函数（）{
$（“详细信息项目”）.prop（“必需”，false）；
$（“#hw#u remplacement_details”）。切换（$（this.val（）==“hw#u remplacement”）；
$（“#sw#u remplacement_details”）。切换（$（this.val（）==“sw#u remplacement”）；
$（“#”+$（this.val（）+“#details#details_projet”）.prop（'required'，true）；
})；

请求类型
替换X
替换Y
替换X
请详细说明
替换Y
请详细说明
到目前为止，您尝试过什么吗？请分享您尝试过的代码…发布的代码，thxCool，在单机版中测试时似乎很好。您知道如何轻松地将其集成到我的代码中吗（见上文）？谢谢您太棒了！！！效果非常好。非常感谢Artley（以及所有其他人的帮助）。谢谢
$("#form").validate({
   ignore: ":hidden"
});

<!DOCTYPE html>
<html>
<head>
    <title>Javascript test</title>
</head>
<body>
    <label><input name="option" type="radio" value="1"> Option 1</label>
    <label><input name="option" type="radio" value="2"> Option 2</label>
    <label><input name="option" type="radio" value="3"> Option 3</label>
    <hr/>
    <div >
        <textarea class="textarea" id="textarea-1" placeholder="textarea 1" ></textarea>
    </div>
    <div >
        <textarea class="textarea" id="textarea-2" class="textarea" placeholder="textarea 2"></textarea>
    </div>
    <div>
        <textarea class="textarea" id="textarea-3" class="textarea" placeholder="textarea 3"></textarea>
    </div>
</body>
<script type="text/javascript">
    var options=document.querySelectorAll("[name=option]");
    console.log(options.length);
    for(var i=0;i<options.length;i++)
    {
        options[i].addEventListener("change",updateTextArea);
    }

    function updateTextArea()
    {
        var all_textarea=document.getElementsByClassName("textarea");
        for(var i=0;i<all_textarea.length;i++)
        {
            all_textarea[i].style.display='none';
            all_textarea[i].removeAttribute("required");
        }
        var value=document.querySelectorAll("[name=option]:checked")[0].value;
        console.log(document.getElementById("textarea-1").style.display);
        if(value==1)
        {
            document.getElementById("textarea-1").style.display='block';
            document.getElementById("textarea-1").setAttribute("required","required");

        }
        else if(value==2)
        {
            document.getElementById("textarea-2").style.display='block';
            document.getElementById("textarea-2").setAttribute("required","required");
        }
        else if(value==3)
        {
            document.getElementById("textarea-3").style.display='block';
            document.getElementById("textarea-3").setAttribute("required","required");
        }
    }
</script>
</html>