Question

我正在尝试从数据库值填充文本框，我想要只读文本框值。当用户单击EDIT选项时，则设置所有文本框变为可编辑。我未能实现这一目标。这是我的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>

这是我的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");
    }

我做错了什么？

Answer 1

您必须使用live来捕获点击事件

$('#edit').live('click',function()

我创建了Example

dynamic文本框

的示例

Answer 2

我相信你所寻找的是这样的：

$('input').prop('readonly',true);

已经回答Here

Answer 3

禁用所有输入字段的代码在DOMReady执行，这是在successCBofListItem执行之前，即在有任何输入禁用之前。你需要确保它在之后执行。

从jQuery 1.6开始，使用.prop('disabled', true)而不是.attr('disabled', true)。此外，您无需迭代选择并单独禁用每个输入，您可以设置整个集合的属性：

$('#contentid :input').prop('disabled', true)

如果你上面粘贴的代码与你的应用程序中存在的代码完全相同，那么你需要将你的javascript包装在<script>...</script>标签中。

完整的解决方案可能如下所示：

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);
     }
}

在上面的successCBofListItem中，您似乎也错过了}，我已经在上面进行了更正。我在上面的代码中留下了content-editable属性，以防你在代码中的其他地方使用它，但是为此目的不需要它。 contenteditable用于编辑不是表单元素的内容。

如何使用jQuery设置动态文本框的只读属性？

3 个答案: