javascript - 如何使用jquery根据选择标签的输出动态地将REQUIRED属性添加到输入标签？

Question

我有一个 select 标签，其中包含两个选项“新建”和“编辑”

当有人选择“新建”选项时，该表单中的所有 input 标记都应标记为必填，而当有人选择“编辑”时，只有少数标记应标记为必填。

<select name="todo" id="todo" required> 
    <option value="">---</option>
    <option value="new">Add</option>
    <option value="edit">Edit</option>
</select>

现在我尝试了一些功能，但它们似乎不起作用

<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
    $('#Name').attr('required',true);
} else if (todo == "edit") {
    //code
}
</script>

和

<script>
function req() {
    var selectBox = document.getElementById('todo');
    var userInput = selectBox.options[selectBox.selectedIndex].value;
    if (userInput == 'new') {
        $('#Name').attr('required',true);
    } else if (todo == "edit") {
        //code
    }
}
</script>

where
<select name="todo" id="todo" onchange="return req();" required></select>

为了确定它是否有效，我在 if 条件中放置了一个 alert() 方法，但该警报从未被触发。

PS。输入标签之一是

<input type="text" id="Name" name="Name">

感谢您提前抽出时间...

编辑

正如 @Maximillian Laumeister 在第二个片段中指出的那样，存在拼写错误(我已在此处更正)。 (抱歉)

Answer 1

这应该足以让你继续前进。 onchange 会检测何时做出不同的选择。然后根据选择的选项执行不同的说明。

jQuery(document).ready(function(){
  jQuery('#todo').on('change', function(event){
    alert(this.value);
    if(this.value === 'edit'){
      
    }
    else if(this.value === 'new'){
      
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<select name="todo" id="todo" required> 
    <option value="">---</option>
    <option value="new">Add</option>
    <option value="edit">Edit</option>
</select>