Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS jQuery Basics (2014) Creating a Password Confirmation Form Perfect

Danielle Howard
Danielle Howard
4,402 Points
Posted by Danielle Howard
Danielle Howard
4,402 Points

Extra functionality and styling

I've gone ahead and created some extra styling for my form, so that the submit button looks different when it is disabled. This way the user knows when the submit button won't work.

This is the code that I used in the CSS

input[disabled]{
   opacity:0.5;
   cursor: default;
}

This styling will also be applied to any disabled input element, which I think is pretty cool!

Thought I'd share this in case anyone else wanted to try something similar.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Edited to format CSS. Please refer to the Markdown Cheatsheet for reference on how to properly format text in the forum.

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You could also use cursor: not-allowed; instead of cursor: default; to really emphasise that they can't submit.

Keith Short
Keith Short
5,971 Points
Keith Short
Keith Short
5,971 Points

Ah this is so much better than my solution which was:

function enableSubmitEvent() {
  if(canSubmit()) {
    $submitButton.prop("disabled", false);
    $submitButton.css("color", "white");
  } else {
    $submitButton.prop("disabled", true);
    $submitButton.css("color", "black");
  }
}

But at least it got me using the JQuery API page to find out about .css

Thanks for this!