Question

我如何根据＆lt;文本字段添加/删除所需的属性？选择＆gt;选项？

示例：如果选择了选项3，则创建所有字段required。否则只制作field1＆amp;需要fieldX？

HTML

<form id=section3Form>
     <input type="text" id="field1">
     <input type="text" id="field2">
     <input type="text" id="field3">
     <input type="text" id="field4">
     <select id="fieldP" required>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 1</option>
     </select>

     <button type="submit" id="submitBtn" value"Submit">
</form>

JQ：

$(#submitBtn).click(function(){
  if ($('#fieldP').val() == "option3") {
      //all fields are required
} else {
     //field1` & `fieldX are required.
}
});

Answer 1

据我所知，你可以使用这个问题：

    <script>
    $(document).ready(function() {
         $('#fieldP').change(function(){
             if($('#fieldP').val() == "option3")              
             {
                 $("input[id^='field']").attr('required','required');
             } 
             else
             {
                 $("#field1").attr('required','required');
                 // same for fieldx
                 // to remove required attribute
                 //$("#field1").removeAttr('required');
             }
         });
    });
</script>

Answer 2

如果我理解您要实现的目标，可以使用以下代码使其在JavaScript方面更具动态性。只需向每个选项数据所需的属性添加所需的输入（以逗号分隔的列表），它将起作用：

<强> HTML

<form id="section3Form">

     <input type="text" id="field1">

     <input type="text" id="field2">

     <input type="text" id="field3">

     <input type="text" id="field4">

     <select id="fieldP" required>

        <option value="option1" data-required="field1,field2">Option 1</option>

        <option value="option2">Option 2</option>

        <option value="option3" data-required="field3">Option 3</option>

     </select>

     <input type="submit" id="submitBtn" value"Submit">

</form>

<强>的Javascript

$(function(){

    $("#submitBtn").click(function(e){

        var selected = $('#fieldP option:selected');

        var required = selected.attr('data-required') ? selected.attr('data-required').split(",") : undefined;

        if(required) {

            $.each(required, function(index, value) {

                alert("Input = " + value + " is Required" );

            });
        }

    });

});

Answer 3

你可以使用这个功能......

function bindRequired(select, value, fieldsId, invert){

    var fields = fieldsId.map(function(id){
        return document.querySelector(id);
    }).filter(function(el){
        return !!el;
    });

    function changeEvent(){



        var isRequired =  select.options[select.selectedIndex].value == value;

        if(invert) isRequired = !isRequired;

        var method = isRequired ? "setAttribute" : "removeAttribute";
        fields.forEach(function(field){

                field[method]("required", isRequired);        
        });

    }

    select.addEventListener("change", changeEvent);  

    changeEvent();

}

bindRequired(document.querySelector("#fieldP"), "option2", ["#field1", "#field3"]);
bindRequired(document.querySelector("#fieldP"), "option3", ["#field1", "#field2", "#field3", "#field4"]);

请参阅jsFiddle http://jsfiddle.net/h3jum8sf/

通过下拉选项定义必填字段

3 个答案: