Question

我得到了这样的表格。

<input type=checkbox onclick=enableEdit(this)/>

<tr>
  <td onclick=enableInput(this)>
   <input style="display:none">
   <span>text1</span>
  </td>
  <td onclick=enableInput(this)>
   <input style="display:none">
   <span>text2</span>
  </td>
  <td>
   <img class='iconPlus' onclick=disableInput(this)/>
  </td>
</tr>

function enableInput(t){
$(t).closest('tr').find('input').show()
$(t).closest('tr').find('span').hide()
}

function disableInput(t){
$(t).closest('tr').find('span').show()
$(t).closest('tr').find('input').hide()
}

function enableEdit(elm){
if($(elm).is(':checked'){
  $('.iconPlus').removeAttr('onclick')
  $('td').removeAttr('onclick')
}else{
  $('.iconPlus').attr('onclick', 'disableInput(this)') 
$('td').attr('onclick','enableInput(this)')   
}    }

因此，在选中该复选框之前，我点击每个td并显示input，隐藏span。然后我点击img，隐藏input并显示span。它工作正常。

但是，当我选中复选框以禁用输入并取消选中它时。当我点击td时，我无法隐藏input并显示span。

我检查了控制台，在input中，它显示display:inline-block而不是none。希望你了解我的情况。请看一下。任何建议将不胜感激。

Answer 1

    <input type=checkbox id="check" /><br/>
<table>
<tr>
  <td id="first" onclick=enableInput(this)>
   <input type="textbox" style="display:none">
   <span>text1</span>
  </td>
  <td id="second" onclick=enableInput(this)>
   <input type="textbox" style="display:none">
   <span>text2</span>
  </td>
  <td>
   <img class='iconPlus' onclick=disableInput(this)/>
  </td>
</tr>
      </table>

Jquery的：

$('#first').click(function(){
    if($("#check").is(':checked'))
       {
       $(this).find('span').hide();
       $(this).find('input').show();
       }
});
$('#second').click(function(){
    if($("#check").is(":checked"))
       {
       $(this).find('span').hide();
       $(this).find('input').show();
}
});

Answer 2

尝试选中此复选框，同时启用或禁用您的元素，例如

function enableInput(t){
   if(!$('#chk:checked').length){
      $(t).closest('tr').find('input').show()
      $(t).closest('tr').find('span').hide()
   }
}

function disableInput(t){
   if(!$('#chk:checked').length){
      $(t).closest('tr').find('span').show()
      $(t).closest('tr').find('input').hide()
   }
}

在您的复选框chk中添加ID，例如

<input id="chk" type="checkbox" onclick="enableEdit(this)"/>

此外，您的代码可以缩短为，

function enableInput(t){
   if(!$('#chk:checked').length){
      $(t).closest('tr').find('input,span').toggle();
   }
}

替代方案，请尝试以下代码段，

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('.iconPlus').on('click', function(e) {
      e.stopPropagation();
      disableInput(this);
    });
    $('td').on('click', function() {
      enableInput(this);
    });
    $(':checkbox').on('click', function() {
      enableEdit(this);
    });
  });

  function enableInput(t) {
    $(t).closest('tr').find('input').show()
    $(t).closest('tr').find('span').hide()
  }

  function disableInput(t) {
    $(t).closest('tr').find('span').show()
    $(t).closest('tr').find('input').hide()
  }


  function enableEdit(elm) {
    if ($(elm).is(':checked')) {
      $('.iconPlus,td').off('click')
    } else {
      $('.iconPlus').on('click', function(e) {
        e.stopPropagation();
        disableInput(this);
      });
      $('td').on('click', function() {
        enableInput(this);
      });
    }
  }
</script>
<input type="checkbox" />
<table>
  <tr>
    <td>
      <input style="display:none">
      <span>text1</span>
    </td>
    <td>
      <input style="display:none">
      <span>text2</span>
    </td>
    <td>
      <img class='iconPlus' alt="img" />
    </td>
  </tr>
</table>

＆＃13;

jquery文本字段无法隐藏（）

2 个答案: