jQuery 如何使用jQuery设置动态文本框的只读属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15927937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set readonly property of dynamic textbox using jQuery?
提问by Erum
I'm trying to fill a textbox from DB values and I want to set textbox value readonly. When the user clicks on an EDIT option then set all textboxes become editable. I have failed to achieve this. Here is my HTML code:
我正在尝试从 DB 值填充文本框，并且我想将文本框值设置为只读。当用户单击编辑选项时，然后将所有文本框设置为可编辑。我没能做到这一点。这是我的 HTML 代码：
<html>
<head>
<script>
$(document).ready(function() {
$('#contentid :input').each(function() {
$(this).attr("disabled",true);
});
$('#edit').on('click',function() {
$('#contentid :input').each(function() {
$(this).attr('disabled',false);});
});
});
</script>
</head>
<body>
<div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
<div data-role="header" id="headerid" class="ui-bar ui-bar-b">
<h3></h3>
</div>
<div data-role="content" id="contentid">
<a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a>
<a href="#" id="edit" data-role="button">EDIT</a>
</div>
</div>
</body>
Here is my JavaScript code:
这是我的 JavaScript 代码：
function getDataofSelectedListItem()
{
alert("getDataofSelectedListI");
clickedListItem = window.localStorage.getItem("clickedValueofList");
console.log("clicked list item"+clickedListItem);
//db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';
console.log("selected list query:"+sqlQuery);
db.transaction(function(tx)
{
tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
},errorCB,successCB);
}
function successCBofListItem(tx,results)
{ alert("erer");
if(results != null && results.rows != null && results.rows.length > 0)
{ $('#contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text" value="'+results.rows.item(0).username+'"/>');
$('#contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
$('#contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');
}
function errorCBofListItem()
{
alert("errorCBofListItem");
}
What am I doing wrong?
我究竟做错了什么？
回答by NullPointerException
回答by Tony
回答by dxh
Your code to disable all input fields is executed at DOMReady, which is before your successCBofListItemis executed, i.e. before there are any inputs to disable. You need to make sure it is executed after.
您禁用所有输入字段的代码在 DOMReady 执行，这是在您successCBofListItem执行之前，即在有任何输入要禁用之前。您需要确保它在之后执行。
As of jQuery 1.6, use .prop('disabled', true)rather than .attr('disabled', true). Furthermore, you need not iterate over the selection and disable each input idividually, you can set the property for the entire collection:
从 jQuery 1.6 开始，使用.prop('disabled', true)而不是.attr('disabled', true). 此外，您无需迭代选择并单独禁用每个输入，您可以为整个集合设置属性：
$('#contentid :input').prop('disabled', true)
If what you've pasted above is your code exactly as it exists in your application, then you need to wrap your javascript in head in <script>...</script>tags.
如果您上面粘贴的代码与应用程序中存在的代码完全相同，那么您需要将 javascript 包装在<script>...</script>标签中。
A complete solution might look something like this:
完整的解决方案可能如下所示：
function toggleForm(disabled) {
$('#contentid :input').prop('disabled', disabled);
}
$(function() {
$('#edit').on('click', function() { toggleForm(false); });
});
...
...
function successCBofListItem(tx,results)
{
if(results != null && results.rows != null && results.rows.length > 0)
{
$('#contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text" value="'+results.rows.item(0).username+'"/>');
$('#contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
$('#contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');
toggleForm(true);
}
}
In your successCBofListItemabove you also seem to be missing a }, which I've corrected above. I've left the content-editableattribute in your code above, in case you're using it for something elsewhere in your code, but it is not required for this purpose. contenteditableis for editing content that is not a form element.
在你successCBofListItem上面你似乎也缺少一个}，我已经在上面更正了。我content-editable在上面的代码中保留了该属性，以防万一您将它用于代码中其他地方的某些内容，但这不是此目的所必需的。contenteditable用于编辑非表单元素的内容。
