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

Last Reply 6 days ago By dharmendr

Posted 6 days 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>

 

You are viewing reply posted by: dharmendr 6 days ago.
Posted 6 days ago Modified on 6 days 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