通过id属性设置与取消只读属性

开发工具与关键技术：VS   ,   ASP.NET.MVC;

作者：吴维杰

撰写时间：2019.07.25

 通过id属性设置与取消只读属性,先看图片,

边看边解析接下来演示的内容(如下图:效果图)

首先一开始刷新页面或打开模态框的状态为(取消只读属性状态):

是否在此设置站务费:false,(复选框没有勾上为false,反则为true)

代码如下:

var isStationMoneys = $('#formInsertRoadSection input[name="StationMoneys"]').prop('checked');//获取复选框的值

       if (isStationMoneys == false) {//判断

       $("#IsStationMoney").val(0);//先赋予站务费值为0

       $("#IsStationMoney").attr("readOnly", "true");//设置为只读属性

       $("#IsCostA").val(0);

       $("#IsCostA").attr("readOnly", "true");

       $("#IsCostB").val(0);

       $("#IsCostB").attr("readOnly", "true");

       $("#IsCostC").val(0);

       $("#IsCostC").attr("readOnly", "true");

       $("#IsCostD").val(0);

       $("#IsCostD").attr("readOnly", "true");

       $("#IsCostE").val(0);

       $("#IsCostE").attr("readOnly", "true");

       $("#IsCostF").val(0);

      $("#IsCostF").attr("readOnly", "true");

                }

这里相当于重置.刚打开模态框状态都为只读状态.

如上图:(效果图)

当复选框为true时,先赋值为空,然后取消只读属性.

var isStationMoneys = $('#formInsertRoadSection input[name="StationMoneys"]').prop('checked');

            if (isStationMoneys == true) {

                $("#IsStationMoney").val("");

                $("#IsStationMoney").attr("readOnly", false);

                $("#IsCostA").val("");

                $("#IsCostA").attr("readOnly", false);

                $("#IsCostB").val("");

                $("#IsCostB").attr("readOnly", false);

                $("#IsCostC").val("");

                $("#IsCostC").attr("readOnly", false);

                $("#IsCostD").val("");

                $("#IsCostD").attr("readOnly", false);

                $("#IsCostE").val("");

                $("#IsCostE").attr("readOnly", false);

                $("#IsCostF").val("");

                $("#IsCostF").attr("readOnly", false);

            }

            if (isStationMoneys == false) {

                $("#IsStationMoney").val(0);

                $("#IsStationMoney").attr("readOnly", "true");

                $("#IsCostA").val(0);

                $("#IsCostA").attr("readOnly", "true");

                $("#IsCostB").val(0);

                $("#IsCostB").attr("readOnly", "true");

                $("#IsCostC").val(0);

                $("#IsCostC").attr("readOnly", "true");

                $("#IsCostD").val(0);

                $("#IsCostD").attr("readOnly", "true");

                $("#IsCostE").val(0);

                $("#IsCostE").attr("readOnly", "true");

                $("#IsCostF").val(0);

                $("#IsCostF").attr("readOnly", "true");

            }