jquery 文本字段无法隐藏()

Question

我得到了 table 这样的。

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

在您的复选框中添加一个 ID chk 比如，

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

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

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

或者，试试下面的代码片段，

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

jquery 文本字段无法隐藏()

jquery text field cannot hide()

javascript

jquery

html

css

hide