The jQuery text input field is unable to be hidden using the hide

My table looks like this.

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

Before checking the checkbox, I click each td to show input and hide span. Then when I click the img, it hides input and shows span.

However, after checking and unchecking the checkbox to disable input, I am unable to hide the input and show the span when clicking on a td.

Upon checking the console, the input is displaying as display:inline-block instead of none. I hope you understand my issue. Any suggestions or help would be greatly appreciated.

javascriptjqueryhtmlcsshide

Answer №1

Ensure to toggle the checkbox when activating or deactivating your elements like so,

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

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

Assign an id to your checkbox chk as demonstrated below,

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

You can also simplify your code like this,

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

Alternatively, consider using the following code snippet for better functionality,

<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(element) {
    $(element).closest('tr').find('input').show();
    $(element).closest('tr').find('span').hide();
  }

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


  function enableEdit(el) {
    if ($(el).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>

Answer №2

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

Javascript:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a stylish navigation bar with custom components using Material UI and React

I've been experimenting with the BottomNavigation component from Material UI, but instead of using labels and text, I want to incorporate custom-made ImageButton components. Here's the code snippet from Material UI: import React from 'rea ...

javascriptreactjsmaterial-ui

Voting Dynamics in Django: Ordering by Popular Vote

There is a lot of existing documentation on this topic, but so far, none of the solutions have worked for me. As the title suggests, my goal is to sort a set of objects using Django Voting based on the number of votes they have (from high to low). I have a ...

pythonhtmldjango

"An ActionResult is received as null when the model is passed as an

Has anyone encountered a situation where the model is null when passed to the controller? I inserted an alert in the ajax call to verify the value and it seemed correct, but upon debugging on the first line of the controller's ActionResult, it shows a ...

javascriptc#ajaxasp.net-mvc

Utilizing ng-pattern in Angular to detect leading zeroes in alphanumeric input fields

Are you wondering how to identify a leading zero in an alphanumeric field using ng-pattern in angular? <body ng-app> <h1>Regex test</h1> <form name="myForm"> <input name="myNumberField" ng-model="myNumber" ng-pa ...

javascriptangularjsregexangularjs-directiveng-pattern

Decomposing LocalStorage data in React using JavaScript

How can I retrieve this element from localStorage? https://i.sstatic.net/e8K3u.png Although I am able to console.log(product.priceHistory), how do I access its price element? useEffect(() => { let productFromLocalStorage = localStorage.getItem(id ...

javascriptreactjslocal-storage

Is there a way to simultaneously send a file and additional information in Flask?

Below is the code I am using to upload a file to Flask. Client Side: <form id="upload-file" method="post" enctype="multipart/form-data"> <fieldset> <label for="file">Select a file</label> <input name="file8" ...

javascriptjqueryajaxflask

How can I retrieve the text content of a label within an option tag in HTML?

While extracting the text from a label in an option and storing them in a json format, this process could be beneficial. Here's an example: <datalist id="datalist1"> <option value="US" label="United States" /> <option value="UK" label= ...

javascriptjqueryhtml

Running compiler-produced assembler code within the program

Recently, I came across an interesting presentation discussing inline ASM generation in Javascript optimization. The presentation can be found at the following link: . In another paper located here: https://sites.google.com/site/juliangamble/Home/Compiler ...

javascriptassemblyschemeinline-assemblydynamically-generated

Utilizing a nested Python list in JavaScript with the help of Django

On my website, I have a feature that displays data in JavaScript Array format, representing a nested list in Python. To achieve this, I utilize a JavaScript function that retrieves the data from a Django view: JavaScript function: var getDataFromFiles1 ...

javascriptjsondjango

What is the best way to add shadow effects to a DIV using CSS?

Is there a way to add shadows within an element using CSS? I attempted the following method but it did not work: #element { shadow: 10px black; } ...

css

A guide on processing text line by line within a textarea and transforming it into JSON using AngularJS

Here is a textarea containing values in a specific format: param01 : value01 param02 : value02 This is the code I have tried: <div class="col-xs-4 input-container"> <textarea id="gateway-params" ng-disabled="!edit">{{gatewayParams}}</te ...

javascriptangularjsjson

send user information to an external website through jquery ajax requests

Recently, I encountered an issue with my HTML form. After validating it using the jQuery bassitance plugin, I attempted to submit the data to a remote script located on another site in order to insert it into a database. However, when checking Firebug, I n ...

phpjqueryajax

Fancybox is experiencing some technical difficulties

Can anyone help me troubleshoot why my fancybox code isn't working properly after adding the script below to the body? Any thoughts on what might be causing this issue? $(document).ready(function() { $("a#example4").fancybox({ 'opa ...

jqueryhtml

Tips for handling the rejection of a promise within a callback function in Node.js

How can we effectively incorporate a catch statement within a rejectionCallback function of a promise? Is it feasible or advisable to structure the code in this manner? Would the Promise object need to be passed into the rejection function in such a scena ...

javascriptnode.jspromise

What are the steps to implement THREE.MeshLine in my JavaScript project?

While exploring ways to create a line using three.js with a modified width, I stumbled upon this article suggesting the usage of a THREE.MeshLine class available here. However, when I attempted to follow the documentation to implement it in my script, I en ...

javascriptthree.js

The rotation function of the div element is malfunctioning

Exploring CSS has led me to a peculiar issue where transform:rotate is not functioning as expected. Here is an instance of the animation not triggering: jsFiddle CSS .close { width:100px; height:100px; background:#00f; ...

htmlcsscss-transitionscss-transforms

Conceal all div elements except for displaying the initial two

Can an entire div be hidden with only the first 2 entities visible? <div class="inline-edit-col"> <span class="title inline-edit-categories-label">Brands</span> <ul class="cat-checklist product_brand-checklist"> < ...

javascriptjqueryhtmlcss

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

htmlcssbootstrap-5

Tips on utilizing variables instead of static values when calling objects in JavaScript

How can I make something like this work? I tried putting the variable in [], but it didn't work. Can someone please help me out with this? Thank you. const obj = { car : "a" , bus: "b" }; const x = "car" ; ...

javascriptreactjs

Automate the population of input fields

I am working on a React application that utilizes Bootstrap. I have an input field that I want to automatically fill with a name when the user clicks a button. Initially, this input field should be empty, as the variable name = "". When the butto ...

javascriptreactjsbootstrap-4react-bootstrap