2

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>

ここに私の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

クリックイベントをキャプチャするにはライブを使用する必要があります

$('#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)

<script>...</script>上に貼り付けたものがアプリケーションに存在するコードとまったく同じである場合は、javascript をタグで先頭にラップする必要があります。

完全なソリューションは次のようになります。

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-editablecontenteditable

于 2013-04-10T14:02:52.587 に答える