How do I "Disable" Checkboxes?

HTML & CSS
1

MODS: Not sure where to post.

I just created a script called “manage-interests.php” which allows a user to check/uncheck a series of Checkboxes representing what they are interested in as far as hobbies (e.g. Football, Knitting, Reading).

Now I just basically copied and pasted that same code in the “user-profile.php” script so that people can view what the user in interested in.

Everything looks good, except for one issue…

How do I make it so the Checkboxes in the user’s profile are DISABLED so people don’t go checking/unchecking them??

(In the user’s profile, I just want a read-only view, because the only place the interests can be updated is in the first script by the member him/herself.)

Thanks.

2

Put the disabled attribute on the checkboxes.

Do realize though that the user can modify this if they know what they are doing. So keep that in mind.

E.g.

<input type="checkbox" name="car" disabled>
3

How can they do that?

Since I am just displaying a member’s interests from the database, and there is no form to submit things, what could possibly happen?

4

If it isn’t a form. why use form inputs?

IMHO that’s poor UX.
It was one of my pet peeves back at vB. The ModCP used non-functional inputs to display information on the same page as inputs that were functional.
Though I imagine the same page as an Admin they would all be functional, I don’t know.
In any case, it confused more than one Mod more than once, and one would think a dev would grasp it. So imagine how confusing a non-dev would find it.

1 Like
5

I have never not used the same controls that were used to capture data as to display it. Seems pretty logical to me…

So what would you propose??

My form looks like the mock-up in Post #2 in this thread.

6

I wouldn’t call that a mock-up. Maybe a “sketch” or by a stretch a “wireframe”.

Anyway. I would use inline block divs and style them to look similar to inputs.

That way they won’t look exactly like the browser’s native form inputs, nor will they have form input behavior.
And a plus is they will be much easier to style

7

Sorry, but I’m not understanding your advice…

Have any screenshots you care to share with me, or some code?

Are you implying that I can make a check-mark or “X” or something?

8

There are subtle differences (eg. the font) but you can style the div much more dependably than the input.

An important difference is the input can be tabbed to and edited, the div can’t be.

<!DOCTYPE html> 
<html>
  <head>
    <title>input vs div</title>
	<style type="text/css">
	  body {
	    background-color: #badbee;
	  }	
	  #mock_input {
	    border: 1px inset #eee;
		display: inline-block;
		padding: 0 1em 0 0.2em;
		background-color: #fff;
	  }	
	</style>
  </head>
  <body>
    <h1>Form Inputs vs. Divs</h1>
    <h2>Form Inputs</h2>
    <form>
      <input type="text" value="My Favorite Hobby" />
    </form>
    <h2>Div</h2>
    <div id="mock_input">My Favorite Hobby</div>
  </body>
</html>
9

@Mittineague,

I don’t understand what your last post has to do with replacing a Checkbox…

Visually, how would you like me to communicate to a user that a given Interest was chosen in the user’s profile?

10

You could display the selected items in bold and use strikethrough for the ones not selected.

11

It’s quite easy. You just use J— … ah, never mind.

3 Likes
12

Inspect element and modify the element by removing disabled.

I can do all sorts of fun stuff!

13

I didn’t know you were a hacker on the side, @RyanReese ?! :smile:

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.