2

我正在尝试从数据库值填充文本框，并且我想将文本框值设置为只读。当用户单击 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");
    }

我究竟做错了什么？

4

3 回答 3

5

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

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

我创建了一个示例

动态文本框示例

于 2013-04-10T14:09:30.150 回答
2

我相信你正在寻找的是这样的：

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

这里已经回答了

于 2013-04-10T14:04:20.380 回答
0

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

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

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

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

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

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上面，您似乎也缺少 a }，我在上面已对其进行了更正。我content-editable在上面的代码中保留了该属性，以防您在代码中的其他地方使用它，但出于此目的不需要它。contenteditable用于编辑不是表单元素的内容。

于 2013-04-10T14:02:52.587 回答