Enable disable textbox on checkbox click event in mvc4 razor view engine

Question

0.00/5 (No votes)

See more:

Kindly let me how I can enable/disable a textbox on checkbox click in mvc..I am populating data in a list and now to need to fill data in the textbox of the row where checkbox is checked..kindly help in implementing the same by passing the checkbox checked/unchecked bool to controller and then enable/disable textbox...solutions in angular.js and jscript are also welcomed..

What I have tried:

I have tried extracting the checkbox check/uncheck to viewbag but it does not supports it...unable to get how to implement the above...

Posted 6-Aug-16 5:47am

Member 11114915 - Tanvi

Updated 6-Aug-16 7:33am

Add a Solution

Comments

Karthik_Mahalingam 6-Aug-16 12:20pm

post the code.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-08-06T07:33:00

Solution 1

For Enable/Disable an element , Angular Controller logic is not required, ng attribute will does the job

HTML

<input type="checkbox" ng-click="flag1=!flag1" />
<input type="text"   ng-disabled="flag1">

Demo:- JSFiddle[^]

Posted 6-Aug-16 7:33am

Karthik_Mahalingam

Comments

Member 11114915 - Tanvi 9-Aug-16 7:04am

Thanks Karthik for the suggestion. Here I have few fields populating from database and passed through controller . A foreach loop is used in view to get the data row wise and checkbox and textbox enabling disabling feature is required row wise. But suggested implementation is working for only first checkbox not for others. Kindly suggest here...

@foreach (var item in Model) {

<tr>

<td>
@Html.DisplayFor(modelItem => item.itemname)
</td>

<td>
<img src="@Url.Content(item.ImgLocation)" alt="IMAGES" />
</td>
<td>
<input type="checkbox" ng-click="flag1=!flag1"/>
<input type="text" ng-disabled="!flag1">
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>

}

Karthik_Mahalingam 9-Aug-16 7:35am

Controller means mvc controller or angular controller

Member 11114915 - Tanvi 9-Aug-16 7:58am

MVC controller

Karthik_Mahalingam 9-Aug-16 8:11am

ok wait

Karthik_Mahalingam 9-Aug-16 8:28am

try this

<input type="checkbox" ng-click="funEnable($event)" />
<input type="text" >

$scope.funEnable = function (obj)
{
obj.target.parentElement.getElementsByTagName('input')[1].disabled = obj.target.checked;

}

Member 11114915 - Tanvi 9-Aug-16 9:31am

Thank you Karthik for the reverts. Above is working only for top row and also disables the textbox when checkbox is checked..it should be other way around...kindly help here

Karthik_Mahalingam 9-Aug-16 9:41am

do you have teamviewer?

Member 11114915 - Tanvi 9-Aug-16 9:59am

Nopz..

Karthik_Mahalingam 9-Aug-16 10:09am

ok

Karthik_Mahalingam 9-Aug-16 9:42am

i have tested it , working fine

Member 11114915 - Tanvi 9-Aug-16 10:00am

Could u pls share ur implementation..

Karthik_Mahalingam 9-Aug-16 10:01am

do you want in angular or plain javascript ?

Member 11114915 - Tanvi 9-Aug-16 12:36pm

angular preferably but js can also work

Karthik_Mahalingam 9-Aug-16 12:40pm

Just now switched off my pc.
Shall I post the code Tomo?

Member 11114915 - Tanvi 9-Aug-16 12:45pm

sure no issues..thanks in advance..:)

Karthik_Mahalingam 10-Aug-16 0:06am

[Serializable]
public class Summary
{
public string itemname { get; set; }

}

public class HomeController : Controller
{

[HttpGet]
public ActionResult Index( )
{
List

lst = new List

();
lst.Add(new Summary() { itemname = "one" });
lst.Add(new Summary() { itemname = "two" });
lst.Add(new Summary() { itemname = "three" });

return View(lst);
}

@model IList<js_apps.controllers.summary>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {

$scope.funEnable = function (obj)
{
obj.target.parentElement.getElementsByTagName('input')[1].disabled = obj.target.checked;

}

});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td>name</td>
<td>validate</td>
</tr>

@foreach (var item in Model)
{

<tr>

<td>
@Html.DisplayFor(modelItem => item.itemname)
</td>

<td>
<input type="checkbox" ng-click="funEnable($event)" />
<input type="text" >
</td>

</tr>

}
</table>
</div>

Member 11114915 - Tanvi 10-Aug-16 0:14am

Thank you so much Karthik...Appreciate your efforts here...nw I am able to disable/enable the textbox on checkbox click event..:)

Karthik_Mahalingam 10-Aug-16 0:30am

:) cool.
from your profile i noticed that you have posted only one question.
feel free to post questions here, we are here to help.

Member 11114915 - Tanvi 10-Aug-16 0:35am

Sure..thanks

Karthik_Mahalingam 10-Aug-16 0:36am

welcome