【问题标题】:Change property to read only is not working将属性更改为只读不起作用
【发布时间】:2014-07-21 14:28:01
【问题描述】:

我有一个内联创建的表格,即你点击添加行,它会打开一个可编辑的行 您可以将数据放入其中并有一个保存按钮。

我尝试做的是两件事

  1. 当您点击保存时(btnsubmit) 会将行状态从editble 更改为read only。我该怎么做?
  2. 并为该特定行添加一个用于编辑的新按钮..

这是我要的代码,文本框名称和复选框1将改为只读

    //Append new row
    var html = '<tr><td>@Html.TextBox("name")</td><td>@Html.CheckBox("checkBox1")</td><td><input id="btnsubmit" type="submit" value="Create" class="btn btn-default" /></td><td></tr>';

    function addRow() {
        if ($('#btnsubmit').length == 0) {

            jQuery(html).prependTo('#data-table');

            $('#btnsubmit').click(function () {

                $('#btnsubmit').hide();
                $('#name').prop('readonly', true);
                initRowEvents(jQuery(document));

            });

        }
    }

name 属性未更改为只读... 我尝试使用hide 到行按钮,但我不确定它是否是最好的方法,因为当我这样做时remove 没有调用该操作...

【问题讨论】:

  • 我认为您正在寻找 attr() 方法而不是 prop()。这似乎可以满足您的需求。
  • fyi,prop("readonly", true) 至少在 Microsoft Edge 中有效,但它有点无关紧要。那么这对 Microsoft Edge 有何看法?

标签: javascript jquery html dom javascript-events


【解决方案1】:

小提琴:http://jsfiddle.net/tmab8/

你做的一切都是对的,除了它不是道具,而是属性:-)

$('input').attr('readonly','')

【讨论】:

  • 谢谢,但我应该如何省略文本框矩形?投票赞成!
  • jsfiddle.net/tmab8/1 .prop() 也可以。实际上,我在 Firefox 中使用 .attr() 时遇到了一些问题,而 .prop() 解决了它。
  • Jean,省略矩形是什么意思?是不是这样:jsfiddle.net/tmab8/2? @Miljan,attr 不在 FF 中工作?你能做一个不工作的小提琴吗?我要检查一下
  • Correct Entio ,我应该在哪里输入 none ,当我单击创建并且字段变为只读时,边框将被删除..
  • @entio 我现在无法重现问题,但是当我根据页面 ID 从选择菜单中选择选项时发生了。客户很沮丧,解决方案是使用 .prop() 函数。或者这可能是移动浏览器的问题,因为网站是响应式的......我不记得了。
【解决方案2】:

readonly 不是属性,而是Readonly W3CHTML 规范中的属性

试试这个会奏效:

$('#name').attr('readonly', true);

【讨论】:

    【解决方案3】:

    你试过$('#name').attr('readonly', true);

    【讨论】:

    • 那么您必须发布您的 html 代码,以便我可以帮助您确保此代码有效:)
    • 对不起它的工作,但我应该如何省略文本框矩形?投票赞成!
    • 你的意思是去掉文本框的边框?
    • 然后在你的css中你可以使用#name{border:none;}或者如果你想在js中你可以使用$('#name').css("border","none" )。希望有帮助:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-12-15
    • 2021-08-06
    • 2017-08-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-11
    相关资源
    最近更新 更多