javascript - 如何使用 jquery/javascript 在 asp.net c# 中禁用单选按钮单击上的链接按钮
问题描述
function disableButtons(val) {
if (val == 'clear') {
$('#btnExcellent, #btnFine, #btnBad').prop('disabled', true);
$('#btnSkip').prop('disabled', false);
} else {
$('#btnExcellent, #btnFine, #btnBad').removeProp('disabled');
$('#btnSkip').prop('disabled',true);
}
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table id="radioBtnQueryQuality">
<tr>
<td><input id="radioBtnQueryQuality_0" type="radio" name="radioBtnQueryQuality" value="clear" onclick="disableButtons('clear');" /><label for="radioBtnQueryQuality_0">One</label></td>
</tr>
<tr>
<td><input id="radioBtnQueryQuality_1" type="radio" name="radioBtnQueryQuality" value="notExpNorImp" onclick="disableButtons('notExpNorImp');" /><label for="radioBtnQueryQuality_1">Two</label></td>
</tr>
<tr>
<td><input id="radioBtnQueryQuality_2" type="radio" name="radioBtnQueryQuality" value="invalid" onclick="disableButtons('invalid');" /><label for="radioBtnQueryQuality_2">Three</label></td>
</tr>
</table>
<a id="btnExcellent" class="btn btn-primary" href="javascript:__doPostBack('btnExcellent','')">Excellent</a>
<a id="btnFine" class="btn btn-primary" href="javascript:__doPostBack('btnFine','')">Fine</a>
<a id="btnBad" class="btn btn-primary" href="javascript:__doPostBack('btnBad','')">Bad</a>
<a id="btnSkip" class="btn btn-primary" href="javascript:__doPostBack('btnSkip','')">Skip</a>
要求:
当我单击第一个单选按钮(即值为one)时,我想禁用btnFour按钮。如果我单击剩余的两个单选按钮,我希望前三个按钮被禁用,除了最后一个。
它不像我想要的那样工作。如果我采用简单的 HTML 按钮,那么它可以工作,但在 LinkButtons 的情况下它不起作用。任何帮助将非常感激。
谢谢你。
解决方案
您可以尝试下面的代码,只需在调用禁用函数时传递单选按钮的值并启用或禁用相关按钮
代码片段
function disableButtons(val) {
if (val == 'clear') {
$('#btnExcellent, #btnFine, #btnBad').addClass('disabled');
$('#btnSkip').removeClass('disabled');
} else {
$('#btnExcellent, #btnFine, #btnBad').removeClass('disabled');
$('#btnSkip').addClass('disabled');
}
$('a.disabled').each(function(){
var href = $(this).attr('href');
//console.log('attr = ' + href);
$(this).data('href', href);
$(this).attr('href', '#')
});
$('a:not(.disabled)').each(function(){
var href = $(this).data('href');
//console.log('data = ' + href);
if(href) {
$(this).attr('href', href);
}
});
}
a.disabled {
opacity: 0.1;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table id="radioBtnQueryQuality">
<tr>
<td><input id="radioBtnQueryQuality_0" type="radio" name="radioBtnQueryQuality" value="clear" onclick="disableButtons('clear');" /><label for="radioBtnQueryQuality_0">One</label></td>
</tr>
<tr>
<td><input id="radioBtnQueryQuality_1" type="radio" name="radioBtnQueryQuality" value="notExpNorImp" onclick="disableButtons('notExpNorImp');" /><label for="radioBtnQueryQuality_1">Two</label></td>
</tr>
<tr>
<td><input id="radioBtnQueryQuality_2" type="radio" name="radioBtnQueryQuality" value="invalid" onclick="disableButtons('invalid');" /><label for="radioBtnQueryQuality_2">Three</label></td>
</tr>
</table>
<a id="btnExcellent" class="btn btn-primary" href="javascript:__doPostBack('btnExcellent','')">Excellent</a>
<a id="btnFine" class="btn btn-primary" href="javascript:__doPostBack('btnFine','')">Fine</a>
<a id="btnBad" class="btn btn-primary" href="javascript:__doPostBack('btnBad','')">Bad</a>
<a id="btnSkip" class="btn btn-primary" href="javascript:__doPostBack('btnSkip','')">Skip</a>
推荐阅读
- android - phonegap 应用程序未在方向更改时更新样式
- r - R - 仅当每个组满足某些条件时才选择 ID
- ios - 如何声明继承的内置协议以便可以从另一个框架或应用程序导入?
- android - 滚动片段位于 Activity 顶部,导致 Activity 视图下方滚动
- sql - SSIS表达式将变量作为列然后抛出错误
- django - 通过 Nginx 代理 HTTPS 向 docker-compose 中的 gunicorn django 提供静态文件
- bounding-box - 如何使用 fastai 为自定义训练图像分类器绘制预测类的边界框
- python - doctest 失败,而输出似乎正确
- admob - 如何将 Google Admob 的欧盟同意政策模板翻译成不同的语言?
- json - 如何解析 JSON 文件中的值并返回 MessageBox 中的值?