I using this code when the checkbox True/False is checked:
A value>>> not required and disable this fieldB value>>> required
But I have problem because when the checkbox True/False is unchecked and clicking on btnConfirm... the field B is required...
I need
- when the checkbox is unchecked the field B is not required
- when the checkbox is checked the field B is required
Can you help me?
My code below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
EnableDisable($("[id*=Truefalse]"));
$("[id*=Truefalse]").click(function () {
EnableDisable($(this));
});
$("[id*=btnConfirm]").click(function () {
if ($('#B').val() == '' && $('#B').attr('disabled') == undefined) {
alert('B value is required.');
return false;
}
});
});
function EnableDisable(element) {
if ($(element).is(':checked')) {
$('#A').attr('disabled', 'disabled');
$('#B').removeAttr('disabled');
} else {
$('#A').removeAttr('disabled');
}
}
</script>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="container">
<div> </div>
<div class="row">
<div class="col-md-12">
<div class="form-group" style="background-color: lightgoldenrodyellow; border:3px solid; font-weight:bold;">
<h5 style="font-weight: bold; text-indent: 20px;">
True/False @Html.CheckBoxFor(m => m.Truefalse, true)
</h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.A)
@Html.TextBoxFor(m => m.A, "{0:dd/MM/yyyy}", new { @Class = "Mytextarea2", placeholder = "A" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.B)
@Html.TextAreaFor(m => m.B, new { style = "width: 420px; height: 100px;", placeholder = "B" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input id="btnConfirm" type="submit" value="Confirm" class="btn btn-default" />
</div>
</div>
</div>
</div>
}
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire