Quick jQuery Projects for Web Designers

2.5 Disabling Buttons

Hello, and welcome back. In this lesson, I wanna take a look at how we can enhance our forms a little bit, using jQuery, by disabling a button, a submit button for example, until a user has checked all of the required checkboxes. So here we have a few check boxes related to terms and conditions, affirming that you're telling the truth and carrying no expectation of privacy. And you'll see that the button by default is disabled. It's kinda faded out, and when we hover over it we get that slash through it. And the way we've done that in our HTML, as we've simply set the button here to disabled, we've given it that disabled attribute. And then, in our CSS, we've pointed to that button, submit, that has the disabled attribute applied to it. And we've set the opacity to 0.5 and we've set the cursor to the red circle with a line through it. So that's how we get it to look like it does, and when you click on it, it doesn't do anything. But if we go back to our HTML, we can see that we have this div that contains all of our checkboxes. So all of our checkboxes are contained inside labels. And it's pretty straightforward there. But again, they're all contained within this div that has an ID of agreements. And there are a couple of ways we could do this, but I wanted to show you a very efficient way. And so let's get started. So we can find the URL for this pen, in the course notes for this lesson. Once you open that up, go ahead and click on fork, to create a new copy of it. And we'll make our changes in that new copy. So if we jump into our JavaScript, you'll notice that we have a few variables that have already been created. We have our agreements, which again, is that section that contains all three of those of checkboxes. And then we have check agreement. So this is looking inside that agreement's div. And we're doing a find on the inputs with a type of checkbox. Now, the reason I've done agreements.find, is simply because it makes things a little bit smoother. Because we've already found agreements here. And jQuery can find anything using an ID, very very efficiently. Using classes or elements, it's a little bit less efficient, it's still pretty efficient. But the most efficient way to find something in jQuery is by using an ID. So we've stored the entire agreements section in this variable here, by searching that ID of agreements. And since jQuery has already found that object on the page in the document, and stored it inside this variable, we can use that here. Because it's already done the searching. So now we're just looking inside that agreement section, to find all of the inputs with a type of checkbox. So this check agreement variable is storing all three of our checkboxes here. And then our btn-submit variable is storing our submit button. So as I've mentioned before, there are a couple of ways we could do this. We could do it by whenever we check one of these checkboxes. We could just check and do this complex if statement that says, if this one's checked, and this one's checked, and this one's checked, then we're gonna turn this button back on, we're going to enable the button. But if you ever decide to add another checkbox or take a checkbox away, then you're gonna have to change that if statement. I wanna show you a way that's gonna be a little more flexible, and allows you to very easily change the number of checkboxes that are there, without having to change any of your Javascript code. And the way we're gonna do that is, whenever we click on one of these checkboxes, we're going to look through the dom to see how many checkboxes there are total, which we can figure out by looking at this chkAgreement variable. We just look at the length of that chkAgreement variable. So that will give us the number of total checkboxes. And then we're just gonna compare that to the number of those checkboxes that have been checked. And if those numbers are equal, then we're going to enable our button. So let's start by creating our on-change event. Whenever we change the value of any of our checkboxes here, we want to trigger this event, check to see if all of the checkboxes are checked. And if so, then we'll enable the button, if not then we'll make sure it's disabled. So to create that agreement, we've already got our checkboxes stored in this variable here. So we can just copy that and paste it here, and we're gonna do a change events. So we're gonna do .on("change"). And then whenever we change the value of one of those checkboxes, we're going to run this function. So for now, let's just enable the button. Whenever you change the value of one of these checkboxes, we're just gonna enable the button so that we can see that that works first. So we're gonna point to our button, which we've stored in a variable called btnSubmit. And we're gonna say dot, and the way we enable a button that has the disabled property or a disabled attribute on it, is we use the prop method, P R O P. And we're gonna change the disabled property. So inside quotation marks, we need to say disabled, comma space, and then the value you wanna set it to. Here we wanna set it false. It's already disabled, we want to enable it by setting the disabled value to false. So now anytime we click on one of these checkboxes, we see that our button is now enabled. So we know that this line of code here works just fine. So now we can put some logic around it. So in order to keep things clean and easy to read, I wanna put this logic in a separate function. So I'm gonna create a function here. And I'm gonna call it allAgreementsChecked. And this is gonna return either true or false. And so what is gonna do, is it's gonna do just what we talked about before. It's gonna look at the number of checkboxes that have been checked. And if that equals the total number of checkboxes, then we're gonna return true. We're gonna say true, yes, all agreements have been checked. So let's do that. We are gonna say if, and we can very easily get the number of checkboxes that exist, by looking at this check agreement variables. So let's copy that, and we're gonna paste that Inside the if. And we need to check the length of that check agreement. Now, remember, this check agreement variable is storing all of the checkboxes, regardless of whether they're checked or not. So if we do a .length here, and didn't mean to put a space there. If we do a .length there, that will give us the number of checkboxes. And we wanna make sure that that value is equal to the number of those checkboxes that have actually been checked. And so the way we do that is I'm gonna copy this selector up here, agreement.find("input{type='checkbox']". I'm gonna copy that and paste it here. But we're gonna add one more thing. And let's stretch this out so we can see the whole line. We're gonna add one more thing, just inside that closing quotation mark. I'm gonna type :checked. And then after this closing parenthesis, but before the closing parenthesis for the if statement, we're gonna do a .length on that as well. Now, you might be wondering why I didn't do this the same way I did our other variables up here. Why not just create a checked variable up here, that looks at the number of checkboxes that are already checked. Well, the reason for that is, if we create that variable at the very beginning when our page loads, then there's gonna be nothing stored in that variable. Because when our page loads, none of these items are checked. And that variable is not automatically going to update whenever you check one of those items. So it's best to wait until you actually need to do the checking, to look for the number of checkboxes that have been checked. So we're gonna say, if the number of checkboxes is equal to the number of checked checkboxes, then we're going to return true. Otherwise, we'll say else. And I put too many curly brackets there. Else, we're gonna return false. There we go. So now, all we need to do is to run this all agreements checked function. If it returns true, if all agreements have been checked, then we're going to enable the button. If it returns false, we're going to make sure that it's disabled. So we can do that inside our change event here. So inside our change event, we're going to check to see if allAgreements have been checked. So we're gonna run that allAgreements checked method. And if it's true, We're going to enable the button else. We're going to disable the button. So we'll just set the disabled value back to true. So let's see if that works. We'll check the first one, nothing happens. The second one, nothing happens. And the third one, and now our button is enabled. And now when we uncheck any of them, it's gonna see that we have one less checked box than we have actual checkboxes. And it is now disabled again. So that's how you can very easily enable and disable a button, based on checkboxes that may or may not have been checked. Thank you for watching, and I'll see you in the next lesson.