locked
Failure checkbox using MVC asp.net and jquery RRS feed

  • Question

  • User-1453200658 posted

    Hi,

    I using this code when the checkbox True/False is checked:

    1. A value >>> not required and disable this field
    2. B 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

    1. when the checkbox is unchecked the field B is not required
    2. 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>&nbsp;</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>
    Thursday, April 22, 2021 10:48 AM

Answers

  • User-474980206 posted

    as disabled is a prop, you should use .prop() which will return true/false

        <script type="text/javascript">
            $(function () {
                EnableDisable($("[id*=Truefalse]"));
     
                $("[id*=Truefalse]").click(function () {
                    EnableDisable($(this));
                });
     
                $("[id*=btnConfirm]").click(function () {
                    if ($('#B').val() == '' && !$('#B').prop('disabled')) {
                        alert('B value is required.');
                        return false;
                    }
                });
            });
     
            function EnableDisable(element) {
                if ($(element).is(':checked')) {
                    $('#A').prop('disabled',true);
                    $('#B').prop('disabled',false);
                } else {
                    $('#A').prop('disabled',false);
                }
            }
        </script>
    

    not sure why "B" is enabled, when its never disabled.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 22, 2021 2:49 PM
  • User287926715 posted

    Hi Edward Sheriff Curtis,

    when the checkbox is unchecked the field B is not required

    When you do not select the True / False check box, you can set field B to disabled. You can refer to the following method.

    View:

    <script>
        $(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');
                $('#B').attr('disabled', 'disabled');
            }
        }
    </script>

    Result:

    Best Regards,

    ChaoDeng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 23, 2021 8:33 AM

All replies

  • User-474980206 posted

    as disabled is a prop, you should use .prop() which will return true/false

        <script type="text/javascript">
            $(function () {
                EnableDisable($("[id*=Truefalse]"));
     
                $("[id*=Truefalse]").click(function () {
                    EnableDisable($(this));
                });
     
                $("[id*=btnConfirm]").click(function () {
                    if ($('#B').val() == '' && !$('#B').prop('disabled')) {
                        alert('B value is required.');
                        return false;
                    }
                });
            });
     
            function EnableDisable(element) {
                if ($(element).is(':checked')) {
                    $('#A').prop('disabled',true);
                    $('#B').prop('disabled',false);
                } else {
                    $('#A').prop('disabled',false);
                }
            }
        </script>
    

    not sure why "B" is enabled, when its never disabled.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 22, 2021 2:49 PM
  • User287926715 posted

    Hi Edward Sheriff Curtis,

    when the checkbox is unchecked the field B is not required

    When you do not select the True / False check box, you can set field B to disabled. You can refer to the following method.

    View:

    <script>
        $(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');
                $('#B').attr('disabled', 'disabled');
            }
        }
    </script>

    Result:

    Best Regards,

    ChaoDeng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 23, 2021 8:33 AM