gpt4 book ai didi

jquery - 通过单击链接禁用字段

转载 作者:行者123 更新时间:2023-12-01 05:14:24 25 4
gpt4 key购买 nike

我想在每次点击链接时禁用表单中的特定字段

以下是链接:

<ul id="links">
<li class="dropdown">
<a class="active" data-toggle="dropdown" href="#" role="button"> Form Type 1</a>
<div class="dropdown-menu">
<a id="drop1" href="#dropdown1">Form #1</a>
<a id="drop2" href="#dropdown2">Form #2</a>
<a id="drop3" href="#dropdown3">Form #3</a>
</div>
</li>
<li class="dropdown">
<a class="" data-toggle="dropdown" href="#" role="button"> Form Type 2</a>
<div class="dropdown-menu">
<a id="drop4" href="#dropdown4">Form #4</a>
<a id="drop5" href="#dropdown5">Form #5</a>
</div>
</li>
</ul>

这是表格:

<form method="post" action="add.php" class="form" id="megaform">
<div class="form-group">
<label>Name</label>
<input type="text" id="Name" name="Name" maxlength="50">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" id="Location" name="Location" maxlength="75">
</div>
<div class="form-group">
<label>Product</label>
<input type="text" id="Product" name="Product" maxlength="100">
</div>
<div class="form-group">
<label>Age</label>
<input type="text" id="Age" name="Age" maxlength="2">
</div>

例如,默认情况下,Form #1 处于事件状态,其中将禁用“产品和年龄”,当我单击链接时,Form #2 将启用“产品和年龄”并禁用位置等。

编辑:我一直试图让它与以下代码一起工作,但失败了:

<script>
$("#drop2").click(function(){
$("#Location").prop("disabled", true\false);
});
</script>

最佳答案

$(document).ready(function(){
$("a").on("click", function(){
var formId = $(this).attr('id');
if(formId == 'drop1'){ //whatever id you want
$('input[type=text]').each(function(){
var inputId = $(this).attr('id');

if( inputId == 'Product' || inputId == 'Age' ){
$(this).prop('disabled',true);
}else{
$(this).prop('disabled',false);
}
})
}else if(formId == 'drop2'){ //whatever id you want
$('input[type=text]').each(function(){
var inputId = $(this).attr('id');
if( inputId == 'Location'){
$(this).prop('disabled',true);
}else{
$(this).prop('disabled',false);
}
})
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="links">
<li class="dropdown">
<a class="active" data-toggle="dropdown" href="#" role="button"> Form Type 1</a>
<div class="dropdown-menu">
<a id="drop1" href="#dropdown1">Form #1</a>
<a id="drop2" href="#dropdown2">Form #2</a>
<a id="drop3" href="#dropdown6">Form #3</a>
</div>
</li>
<li class="dropdown">
<a class="" data-toggle="dropdown" href="#" role="button"> Form Type 2</a>
<div class="dropdown-menu">
<a id="drop4" href="#dropdown10">Form #4</a>
<a id="drop5" href="#dropdown11">Form #5</a>
</div>
</li>
</ul>
<form method="post" action="add.php" class="form" id="megaform">
<div class="form-group">
<label>Name</label>
<input type="text" id="Name" name="Name" maxlength="50">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" id="Location" name="Location" maxlength="75">
</div>
<div class="form-group">
<label>Product</label>
<input type="text" id="Product" name="Product" maxlength="100">
</div>
<div class="form-group">
<label>Age</label>
<input type="text" id="Age" name="Age" maxlength="2">
</div>
</form>
</body>
</html>

关于jquery - 通过单击链接禁用字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51949725/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com