html 为所有非空字段创建ReandOnly条件- ASP.NET Core 6.0 MVC

irtuqstp  于 2022-12-09  发布在  .NET
关注(0)|答案(2)|浏览(143)

我正在用ASP.NETCore6开发我的第一个Web应用程序,我有一个表单,它显示了我的数据库中已经有信息的一些字段。
问题是:这些字段必须是只读的,因为我的使用者需要考虑数据库中的信息。如果是null,则他需要插入值。
下面是一个示例(考虑已经设置为只读的字段)。大多数字段都需要此代码:

<div class="form-group row">
    <div class="col-3">
        <label for="Renda Bruta">Associado Desde:</label>
        <input type="text" class="form-control">
    </div>
    <div class="col-3">
        <label for="Renda Liquida">Cota Capital</label>
        <input type="text" class="form-control">
    </div>
    <div class="col-6" style="text-align:center">
        <label for="ServidorPublico">IAP:</label>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Quantidade" value="@Html.DisplayFor(model => model.iAP.QuantidadeProduto)" ReadOnly="readonly"/>
            <input type="text" class="form-control" placeholder="Produtos" value=""@Html.DisplayFor(model => model.iAP.Pro)" ReadOnly="readonly"/>
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-4">
        <label for="Renda Bruta">Margem Contribuição</label>
        <input type="text" class="form-control">
    </div>
    <div class="col-8" style="text-align:center">
        <label for="ServidorPublico">Cheque Especial</label>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Dias de Utilização" />
            <input type="text" class="form-control" placeholder="Valor Utilizado" />
            <input type="text" class="form-control" placeholder="Valor Contratado" />
        </div>
    </div>
</div>

我已经构建了表单,并且用ReadOnly="readonly"将一些字段设置为readonly,但是有没有办法循环所有字段并用循环设置readonly,或者我真的需要在所有字段中写入代码'ReadOnly=“readonly”?我的表单真的很大

qaxu7uf2

qaxu7uf21#

但是有没有办法循环所有的字段,然后用一个循环来放置readonly,或者我真的需要在所有的字段中写入代码'ReadOnly=“readonly”?我的窗体真的很大
可以,您可以根据textbox字段的值设置ReadOnly属性。
在这种情况下,你必须考虑两种方式,要么你应该考虑你的文本框name属性或type="text"属性。根据这两种方式,我们将决定哪个文本框设置为readonly,哪个不是。

对于[类型='text']属性:

[type='text']意味着我们将检查所有text类型的文本框,并检查文本框是否有值并设置readonly属性:
查看方式:

<div class="form-group row">
    <div class="col-3">
        <label for="Renda Bruta">Associado Desde:</label>
        <input type="text" name="Associado" class="form-control">
    </div>
    <div class="col-3">
        <label for="Renda Liquida">Cota Capital</label>
        <input type="text" name="Cota" class="form-control">
    </div>
    <div class="col-6" style="text-align:center">
        <label for="ServidorPublico">IAP:</label>
        <div class="input-group mb-3">
            <input type="text" name="Quantidade" class="form-control" placeholder="Quantidade" value="Test Value" />
            <input type="text" name="Produtos" class="form-control" placeholder="Produtos" value="Test Value Products" />
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-4">
        <label for="Renda Bruta">Margem Contribuição</label>
        <input type="text" name="Margem" class="form-control">
    </div>
    <div class="col-8" style="text-align:center">
        <label for="ServidorPublico">Cheque Especial</label>
        <div class="input-group mb-3">
            <input type="text" name="Dias" class="form-control" placeholder="Dias de Utilização" />
            <input type="text" name="Utili" class="form-control" placeholder="Valor Utilizado" />
            <input type="text" name="Contra" class="form-control" placeholder="Valor Contratado" />
        </div>
    </div>
</div>

脚本:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $("input[type='text']").each(function (index, item) {
                console.log(item);
                if ($(item).val() != "") {
                    $(item).attr('readonly', true);
                }
            });
        });
    </script>
}

**注意:**当将readonly设置为文本框(其值基于文本类型)时,我们必须考虑input[type='text']
对于名称属性:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $("input").each(function (index, item) {
                console.log(item);
                if ($(item).val() != "") {
                    $(item).attr('readonly', true);
                }
            });
        });
    </script>
}

**注意:**请记住,在此场景中,您需要为文本框设置name属性以进行唯一标识,如您所见,我添加了name property

输出量:

x9ybnkn6

x9ybnkn62#

我的理解是,当输入字段的值为空时,您希望使其可输入。这是由javascript完成的。
1.我建议将所有输入字段设为只读。
1.使用javascript测试每个字段,如果其值为空,则使其可输入。例如:

<input type="text" id="text1" class="form-control" placeholder="Quantidade" value="@Html.DisplayFor(model => model.iAP.QuantidadeProduto)" ReadOnly="readonly"/>



 <script>
 window.onload = function() {
     if (document.getElementById("text1").value.length == 0)
      {
 document.getElementById("text1").readOnly = false;
 }}
 </script>

因此基本上当页面加载时,脚本将检查输入是否为空,然后执行操作。

相关问题