how to change attribute "hidden" in jquery

Question

<td>
<input id="check" type="checkbox" name="del_attachment_id[]" value="<?php echo $attachment['link'];?>">
</td>

<td id="delete" hidden="true">
the file will be deleted from the newsletter
</td>

I want to know how can i change the attribute "hidden" to false in Jquery when the checkbox is checked or not checked.

possible duplicate of How to enable button when checkbox clicked in jquery? — Dana Cartwright
– Dana Cartwright, Commented Jun 12, 2015 at 17:46
@user3314813, if none of the answers worked or you are still facing trouble, let me know so I can help — AmmarCSE
– AmmarCSE, Commented Jun 12, 2015 at 22:27
Using .prop('hidden', false) and .prop('hidden', true) worked for me while .removeAttr('hidden') didn't. — DoYouEvenCodeBro
– DoYouEvenCodeBro, Commented Jul 13, 2019 at 2:53

AmmarCSE · Accepted Answer · 2015-06-12 17:40:22Z

71

$(':checkbox').change(function(){
    $('#delete').removeAttr('hidden');
});

Note, thanks to tip by A.Wolff, you should use removeAttr instead of setting to false. When set to false, the element will still be hidden. Therefore, removing is more effective.

edited Jun 12, 2015 at 17:40

answered Jun 12, 2015 at 17:16

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

A. Wolff Over a year ago

Hidden is a boolean attribute, you need to remove it, not setting it to 'false'. Or use .prop('hidden', false);

AmmarCSE Over a year ago

@A.Wolff, do you mean attr wont work or something else?

AmmarCSE Over a year ago

@A.Wolff, according to sitepoint.com/web-foundations/hidden-html-attribute value is 'true' or 'false'

A. Wolff Over a year ago

Looks like wrong interpretation,see e.g setting it to false, element still hidden: jsfiddle.net/nyq35m7x

AmmarCSE Over a year ago

@A.Wolff, I see. Thanks so much for pointing out. Updated my answer giving you credit. :) thanks again

Christopher Moore · Accepted Answer · 2018-09-24 12:21:31Z

69

You can use jquery attr method

$("#delete").attr("hidden",true);

edited Sep 24, 2018 at 12:21

Christopher Moore

3,0995 gold badges33 silver badges46 bronze badges

answered Jun 12, 2015 at 17:16

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

4 Comments

AmmarCSE Over a year ago

Put the change handler in your answer so it will be complete answer. Then, I will delete mine

Alex78191 Over a year ago

why not .prop("hidden",true);?

Ron Over a year ago

@Alex78191 hidden is an attribute, not a property. w3schools.com/tags/att_hidden.asp

Alex78191 Over a year ago

there is a hidden property developer.mozilla.org/ru/docs/Web/API/HTMLElement/hidden

Dev-iL · Accepted Answer · 2017-03-21 15:26:13Z

18

A. Wolff was leading you in the right direction. There are several attributes where you should not be setting a string value. You must toggle it with a boolean true or false.

.attr("hidden", false) will remove the attribute the same as using .removeAttr("hidden").

.attr("hidden", "false") is incorrect and the tag remains hidden.

You should not be setting hidden, checked, selected, or several others to any string value to toggle it.

edited Mar 21, 2017 at 15:26

Dev-iL

24.3k7 gold badges65 silver badges108 bronze badges

answered Mar 21, 2017 at 15:04

JoeFlash

2413 silver badges3 bronze badges

Comments

Gokul · Accepted Answer · 2017-08-06 07:34:00Z

12

Use prop() for updating the hidden property, and change() for handling the change event.

$('#check').change(function() {
  $("#delete").prop("hidden", !this.checked);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input id="check" type="checkbox" name="del_attachment_id[]" value="<?php echo $attachment['link'];?>">
    </td>

    <td id="delete" hidden="true">
      the file will be deleted from the newsletter
    </td>
  </tr>
</table>

edited Aug 6, 2017 at 7:34

Gokul

8312 gold badges13 silver badges30 bronze badges

answered Jun 12, 2015 at 17:17

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Collectives™ on Stack Overflow

how to change attribute "hidden" in jquery

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related