如何使用基于当前月份的Javascript将输入字段设置为READONLY

时间:2014-04-10 06:57:43

标签: c# javascript html asp.net asp.net-mvc

该app ASP.NET MVC 5应用程序

表格:  [Id,雇主,ITONumber,描述,TECNumber,TECVersion,等级,积分,持续时间,行业,状态,批准,1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月] < / p>

的需求量的:

使用Javascript

,根据当前月份设置要编辑的月份字段

例如:当前月份是[Apr],那么表格中的所有字段都应该在编辑页面/表单上设置为READONLY。除了[4月]


_layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @*@Scripts.Render("~/bundles/modernizr")*@
    <script type="text/javascript" src="ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Pipeline Data", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Pipeline", "Index", "Pipeline")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Edit.cshtml

@model PipelineApp.Models.Pipelinedata

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()



    <div class="form-horizontal">
        <h4>Pipelinedata</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Employer, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Employer)*@
                @Html.TextBoxFor(model => model.Employer, new { @readonly = "true" })
                @Html.ValidationMessageFor(model => model.Employer)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ITONumber, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.ITONumber)*@
                @Html.TextBoxFor(model => model.ITONumber, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.ITONumber)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Description)*@
                @Html.TextBoxFor(model => model.Description, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TECNumber, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.TECNumber)*@
                @Html.TextBoxFor(model => model.TECNumber, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.TECNumber)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TECVersion, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.TECVersion)*@
                @Html.TextBoxFor(model => model.TECVersion, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.TECVersion)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Level, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Level)*@
                @Html.TextBoxFor(model => model.Level, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.Level)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Credits, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Credits)*@
                @Html.TextBoxFor(model => model.Credits, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.Credits)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Duration, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Duration)*@
                @Html.TextBoxFor(model => model.Duration, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.Duration)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Sector, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Sector)*@
                @Html.TextBoxFor(model => model.Sector)
                @Html.ValidationMessageFor(model => model.Sector)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Status, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Status)*@
                @Html.TextBoxFor(model => model.Status, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.Status)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Approval, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Approval)*@
                @Html.TextBoxFor(model => model.Approval, new { @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.Approval)
            </div>
        </div>



      <script type="text/javascript">

          //alert("test")

          $("document").ready(function () {
              var today = new Date();
              var month = today.getMonth() + 1;

              $('.month').each(function () {
                  if ($(this).attr('id') == month) {
                      $(this).attr("disabled", false);
                      //$(this).removeAttr('readonly');

                  } else {
                      $(this).attr("disabled", true);
                      //$(this).attr('readonly', 'readonly');

                  }
              });
          });


     </script>



        <div id="" class="form-group">
            @Html.LabelFor(model => model.Jan, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Jan)*@
                @Html.TextBoxFor(model => model.Jan, new { id = "1", @class = "month" })
                @Html.ValidationMessageFor(model => model.Jan)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Feb, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Feb)*@
                @Html.TextBoxFor(model => model.Feb, new { id = "2", @class = "month" })
                @Html.ValidationMessageFor(model => model.Feb)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Mar, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Mar)*@
                @Html.TextBoxFor(model => model.Mar, new { id = "3", @class = "month" })
                @Html.ValidationMessageFor(model => model.Mar)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Apr, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Apr)*@
                @Html.TextBoxFor(model => model.Apr, new { id = "4", @class = "month" })
                @Html.ValidationMessageFor(model => model.Apr)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.May, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.May)*@
                @Html.TextBoxFor(model => model.May, new { id = "5", @class = "month" })
                @Html.ValidationMessageFor(model => model.May)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Jun, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Jun)*@
                @Html.TextBoxFor(model => model.Jun, new { id = "6", @class = "month" })
                @Html.ValidationMessageFor(model => model.Jun)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Jul, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Jul)*@
                @Html.TextBoxFor(model => model.Jul, new { id = "7", @class = "month" })
                @Html.ValidationMessageFor(model => model.Jul)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Aug, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Aug)*@
                @Html.TextBoxFor(model => model.Aug, new { id = "8", @class = "month" })
                @Html.ValidationMessageFor(model => model.Aug)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Sep, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Sep)*@
                @Html.TextBoxFor(model => model.Sep, new { id = "9", @class = "month" })
                @Html.ValidationMessageFor(model => model.Sep)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Oct, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Oct)*@
                @Html.TextBoxFor(model => model.Oct, new { id = "10", @class = "month" })
                @Html.ValidationMessageFor(model => model.Oct)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Nov, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Nov)*@
                @Html.TextBoxFor(model => model.Nov, new { id = "11", @class = "month" })
                @Html.ValidationMessageFor(model => model.Nov)
            </div>
        </div>

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Dec, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Dec)*@
                @Html.TextBoxFor(model => model.Dec, new { id = "12", @class = "month" })
                @Html.ValidationMessageFor(model => model.Dec)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

PipelineController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using PipelineApp.Models;

namespace PipelineApp.Controllers
{
    public class PipelineController : Controller
    {
        private PipelineEntities db = new PipelineEntities();

        //CUSTOM GET: /Pipelinedata/ Sector Filtering/ Sort Order
        public ActionResult Index(string sector, string sortOrder, int? page)
        {
            //Filter Secors ------------------------------
            ViewBag.Sector = (from r in db.Pipelinedatas
                              select r.Sector).Distinct();

            //---------------------------------------------

            var model = from r in db.Pipelinedatas
                        where r.Sector == sector || sector == null || sector == ""
                        select r;


            //Sort Order ----------------------------------
            ViewBag.CurrentSort = sortOrder; //Paging

            ViewBag.EmployerSortParm = String.IsNullOrEmpty(sortOrder) ? "emp_name" : "";
            ViewBag.ITOSortParm = String.IsNullOrEmpty(sortOrder) ? "ITO" : "";
            ViewBag.JanSortParm = String.IsNullOrEmpty(sortOrder) ? "January" : "";
            ViewBag.FebSortParm = String.IsNullOrEmpty(sortOrder) ? "February" : "";
            ViewBag.MarSortParm = String.IsNullOrEmpty(sortOrder) ? "March" : "";
            ViewBag.AprSortParm = String.IsNullOrEmpty(sortOrder) ? "April" : "";
            ViewBag.MaySortParm = String.IsNullOrEmpty(sortOrder) ? "May" : "";
            ViewBag.JunSortParm = String.IsNullOrEmpty(sortOrder) ? "June" : "";
            ViewBag.JulSortParm = String.IsNullOrEmpty(sortOrder) ? "July" : "";
            ViewBag.AugSortParm = String.IsNullOrEmpty(sortOrder) ? "August" : "";
            ViewBag.SepSortParm = String.IsNullOrEmpty(sortOrder) ? "September" : "";
            ViewBag.OctSortParm = String.IsNullOrEmpty(sortOrder) ? "October" : "";
            ViewBag.NovSortParm = String.IsNullOrEmpty(sortOrder) ? "November" : "";
            ViewBag.DecSortParm = String.IsNullOrEmpty(sortOrder) ? "December" : "";

            ViewBag.SectorSortParm = sortOrder == "sec" ? "ITO" : "sec";

            switch (sortOrder)
            {
                case "emp_name":
                    model = model.OrderByDescending(s => s.Employer);
                    break;
                case "sec":
                    model = model.OrderBy(s => s.Sector);
                    break;
                case "ITO":
                    model = model.OrderByDescending(s => s.ITONumber);
                    break;
                case "January":
                    model = model.OrderByDescending(s => s.Jan);
                    break;
                case "February":
                    model = model.OrderByDescending(s => s.Feb);
                    break;
                case "March":
                    model = model.OrderByDescending(s => s.Mar);
                    break;
                case "April":
                    model = model.OrderByDescending(s => s.Apr);
                    break;
                case "May":
                    model = model.OrderByDescending(s => s.May);
                    break;
                case "June":
                    model = model.OrderByDescending(s => s.Jun);
                    break;
                case "July":
                    model = model.OrderByDescending(s => s.Jul);
                    break;
                case "August":
                    model = model.OrderByDescending(s => s.Aug);
                    break;
                case "September":
                    model = model.OrderByDescending(s => s.Sep);
                    break;
                case "October":
                    model = model.OrderByDescending(s => s.Oct);
                    break;
                case "November":
                    model = model.OrderByDescending(s => s.Nov);
                    break;
                case "December":
                    model = model.OrderByDescending(s => s.Dec);
                    break;
                default:
                    model = model.OrderBy(s => s.Id);
                    break;
            }
            //---------------------------------------------

            //Paging --------------------------------------
            //int pageSize = 3;
            //int pageNumber = (page ?? 1);
            //return View(model.ToPagedList(pageNumber, pageSize));
            //---------------------------------------------

            return View(model);

        }




        // GET: /Pipeline/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Pipelinedata pipelinedata = db.Pipelinedatas.Find(id);
            if (pipelinedata == null)
            {
                return HttpNotFound();
            }
            return View(pipelinedata);
        }

        // GET: /Pipeline/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: /Pipeline/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include="Id,Employer,ITONumber,Description,TECNumber,TECVersion,Level,Credits,Duration,Sector,Status,Approval,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec")] Pipelinedata pipelinedata)
        {
            if (ModelState.IsValid)
            {
                db.Pipelinedatas.Add(pipelinedata);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(pipelinedata);
        }

        // GET: /Pipeline/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Pipelinedata pipelinedata = db.Pipelinedatas.Find(id);
            if (pipelinedata == null)
            {
                return HttpNotFound();
            }
            return View(pipelinedata);
        }

        // POST: /Pipeline/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include="Id,Employer,ITONumber,Description,TECNumber,TECVersion,Level,Credits,Duration,Sector,Status,Approval,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec")] Pipelinedata pipelinedata)
        {
            if (ModelState.IsValid)
            {
                db.Entry(pipelinedata).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(pipelinedata);
        }

        // GET: /Pipeline/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Pipelinedata pipelinedata = db.Pipelinedatas.Find(id);
            if (pipelinedata == null)
            {
                return HttpNotFound();
            }
            return View(pipelinedata);
        }

        // POST: /Pipeline/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Pipelinedata pipelinedata = db.Pipelinedatas.Find(id);
            db.Pipelinedatas.Remove(pipelinedata);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

作为我的新手,请看一些关于应该做什么的正确指示。一如既往,您的时间是值得赞赏的

2 个答案:

答案 0 :(得分:1)

这是小提琴CLICK 给你所有月份的id 喜欢1月1日,2月2日... 12月12日 样品

1月@Html.EditorFor(model => model.Jan,null,new {id="1",@class="month"})

11月

@Html.EditorFor(model => model.Nov,null,new {id="11",@class="month"})

然后在你的javascript中添加以下内容。这是最简单的方法

$(document).ready(function() {
var today=new Date();
     var month=today.getMonth()+1;
    $('.month').each(function(){
        if($(this).attr('id')==month)
        {
    $(this).attr("disabled",false);
        }
        else
        {$(this).attr("disabled",true);
        }
    });
});

如果您使用的是jquery 1.5或1.5-而不是使用attr使用prop。但如果您使用的是jquery 1.6+,那么答案应该适合您。

答案 1 :(得分:0)

试试这个:

查看:

        <div id="" class="form-group">
            @Html.LabelFor(model => model.Jan, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.TextBoxFor(model => model.Jan)*@
                @Html.TextBoxFor(model => model.Jan, new { id = "1", @class = "month", @onload = "checkDate()" })
                @Html.ValidationMessageFor(model => model.Jan)
            </div>
        </div>

使用Javascript:

function checkDate(){
    var today=new Date();
     var month=today.getMonth()+1;
    $('.month').each(function(){
    if($(this).attr('id')==month)
    {
        $(this).prop("disabled",false);
    }
    else
    {
        $(this).prop("disabled",true);
    }
}