Set TextBox value based on CheckBox checked unchecked using jQuery in ASP.Net MVC

Last Reply 3 months ago By dharmendr

Posted 3 months ago

i want if checkbox is check so textbox value is "selected" else textbox value is blank

it should be that user checked the checkbox so value of textbox is Selected if user uncheck the checkbox so value of textbox is clear 

    // this is check box bool type propert in my model
    <div class="form-group">
        @Html.LabelFor(model => model.Sw, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.Sw)
                @Html.ValidationMessageFor(model => model.Sw, "", new { @class = "text-danger" })
            </div>
         
        </div>
    </div>



    // this is textbox string type property in my model
    <div class="form-group">
        @Html.LabelFor(model => model.AboutMe, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.AboutMe, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.AboutMe, "", new { @class = "text-danger" })
        </div>
    </div>

 

Posted 3 months ago Modified on 3 months ago

Hi nauna,

You can handle the TextBox value from Controller.

Check this example. Now please take its reference and correct your code.

Model

public class CustomerModel
{
    public bool Sw { get; set; }
    public string AboutMe { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        CustomerModel model = new CustomerModel();
        model.Sw = true;
        if (model.Sw)
        {
            model.AboutMe = "select";
        }
        return View(model);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_CheckBox_Based_TextBox_MVC.Models.CustomerModel>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=chkStatus]').on('click', function () {
                if ($(this).is(':checked')) {
                    $('[id*=txtAboutMe]').val("select");
                }
                else {
                    $('[id*=txtAboutMe]').val("");
                }
            });
        });
    </script>
</head>
<body>
    <div class="form-group">
        <%:Html.LabelFor(model => model.Sw)%>
        <div class="col-md-10">
            <div class="checkbox">
                <%:Html.CheckBoxFor(model => model.Sw,  new { id="chkStatus", @class = "form-control" } )%>
            </div>
        </div>
    </div>
    <br />
    <div class="form-group">
        <%:Html.LabelFor(model => model.AboutMe)%>
        <div class="col-md-10">
            <%:Html.TextBoxFor(model => model.AboutMe, new { id = "txtAboutMe", @class = "form-control" })%>
        </div>
    </div>
</body>
</html>

Screenshot