【发布时间】：2021-02-04 07:35:46
【问题描述】：
列表中有两个 RadiobuttonFor 项目。一个值为“是”，另一个值为“否”。选择“是”时，页面的一部分将可见，而选择“否”时，该部分不应显示。
我面临的问题是，即使选择“否”，通过 Javascript 的值也是“是”。无论选择何种选项，该值始终为“是”。
我尝试了多种以不同方式获取值的方法，但总是得到相同的结果，并且值被拉为“是”。
是否有一些不同的方式来提取正确的值？
MVC HTML：
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div data-toggle="buttons">
<label class="btn btn-radio">
@Html.RadioButtonFor(m => m.Claims, "Yes", new { name = "radClaim" }) Yes
</label>
<label class="btn btn-radio">
@Html.RadioButtonFor(m => m.Claims, "No", new { name = "radClaim" }) No
</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
@Html.ValidationMessageFor(m => m.Claims, null, new { id = "clmError" })
</div>
Javascript： 即使选择了 No，this.value 和 var selected 也始终为“Yes”。
$("input[name='Claims']").on("change", function () {
var selected = $("input[name='Claims']:checked").val()
if (this.value === "Yes") {
$("#showClaimsHistory").show();
if (claimCount > 0) {
$("#showClaimList").show();
}
} else {
$("#showClaimsHistory").hide();
$("#showClaimList").hide();
}
});
CSS：
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 7px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #555555;
text-decoration: none;
}
.btn:active,
.btn.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-radio {
/*border-radius: 30px;*/
border: 1px solid #dcdcdc;
cursor: pointer;
display: inline-block;
font-weight: 600;
/* padding: .75em 1em; */
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 110px;
font-size: 16px;
letter-spacing: 2px;
line-height: 40px;
height: 60px;
text-align: center;
text-transform: none;
padding-left: 4.2em !important;
padding-right: 4.2em !important;
margin-right: 1.2em !important;
}
.btn-radio:hover {
background: #1e73e9 !important;
border: 1px solid #1e73e9 !important;
color: #fff;
}
------------ 编辑 -------------
【问题讨论】：
-
从两个单选按钮中删除此代码 new { name = "radClaim" }
-
@meysam asadi，我已删除该代码，但仍未解决
标签： javascript jquery asp.net-mvc