Disabling button on clicking another button


(Colette Levesque) #1

Greetings! I have been using jQuery in my project and it works fine.
What i can’t get working however is:

When I click button 1, i want to disable button2 and button 3.

I tried to add $( “#button2” ).prop( “disabled”, true ); and same for button3 but it just makes button 1 stop working all together.

Any ideas? Thanks!


#2

Need a little more to understand what’s going on. Like a document or URL. The “prop” is normally for a form so may not work in this case. You may want to change the pointer events to “none” if you want to stop buttons from being clicked.


(Colette Levesque) #3

Thanks for the quick reply.

I want the user to click the number 3 button under the caramels. The other remaining buttons (licorice 4, jaw breakers 4, chocolate bars 5, and lollipops 4) should be disabled.

Here is the example: https://jsdevblog.000webhostapp.com/probability.html

I cheated by putting a transparent box over the buttons i want to disable. That works fine when using a mouse except when tabbing you can still get to the unwanted buttons, so i really need to disable 7, 4, 5, 4. I hope this provides enough info.

Thanks again.
Colette


#4

If tab is the only issue you can highlight all your buttons and give them a “tab index” of “-1” in the identity inspector. (CMD-8) or the

This will prevent them from being selected using the tab button.

Failing that, you can run a little javascript that changes the “pointer events” property to none that effectively disables the clicking of the elements. This would take a little more work and using functions to enforce this but I feel the tab index is probably the way to go. If you want to go this route post back and let us know and we’ll post a solution.


(Colette Levesque) #5

Hi. That sounds like a great solution however this needs to be keyboard accessible, so -1 is not an option unless i can set -1 to the other buttons when i click the first one, but restore the tab index when resetting the exercise.
I wouldn’t mind knowing about how to use the pointer event. I am comfortable using functions. That might be the way i must go.


#6

OK. well it may be better to share your doc so it’s quicker to offer the specific solution. If you can’t do that then I could offer something with the hope that you can follow.

quickest is to set all button pointer events to “none” and then change the specific element’s pointer event to “auto” effectively resetting it’s pointer event after the change. Note this will effect all buttons as when created in Hype all buttons have the “role” filled as “button” if you don’t want to include a specific button you can get rid of this attribute in the inspector.

Run this “on click”. Notice the reset button ID. This is an extra button for the reset. Doesn’t have to be a button could be another source.

var buttons = document.querySelectorAll('div[role=button]');
for(var i=0; i < buttons.length; i++){
	
	if(buttons[i].id === element.id){
		hypeDocument.getElementById(buttons[i].id).style.pointerEvents = "auto";
	} else {
		buttons[i].style.pointerEvents = "none";
	}
}
	
hypeDocument.getElementById('reset-button').style.pointerEvents = "auto";

Then for the reset button run this

var buttons = document.querySelectorAll('div[role=button]');
	
	for(var i=0; i < buttons.length; i++){
		buttons[i].style.pointerEvents = "auto";
	}

(Colette Levesque) #7

I tried the code. It works perfectly except i can still tab to the 2nd, 3rd, 4th and 5th buttons. I want to lock down the exercise completely (except for the reset button) after the first button is clicked.

I’m attaching the hype file.
probability testing.hype.zip (74.9 KB)

Thanks again, i’m learning lots and love Hype :smile:

functionality needs:
I am hoping that after the first button (4) is pressed, the other ones to the right cannot be selected. This whole exercise is geared so the student clicks a caramel button and the only other button after that that can be pressed is the reset button (return all candies to bag). The exercise doesn’t need to do anything else.

The part i’m having difficulty with is when clicking the first button, i can still tab to the 2nd one and trigger it’s js. I do need to tab for accessibility reasons though.

p.s. i was able to fake the functionality but it would be nice to know how to do this programatically as i’ll be using Hype a lot. What i did was when button 1 is clicked, the buttons i no longer want are hidden using jquery. I have an identical images of the buttons sitting behind the real buttons i want to disable, so it appears like the buttons are still there, just disabled. :slight_smile:


(Mark Hunte) #8

Try changing in the addCaramel()

   else {
 		buttons[i].style.pointerEvents = "none";
 		
 	}

to

else {
        		buttons[i].style.pointerEvents = "none";
        		$(buttons[i]).attr("tabindex","");
        	}

and in probabilityReset()

for(var i=0; i < buttons.length; i++){
		buttons[i].style.pointerEvents = "auto";
		
	}

to

for(var i=0; i < buttons.length; i++){
		buttons[i].style.pointerEvents = "auto";
		$(buttons[i]).attr("tabindex","0");
	}

#9

As @MarkHunte has suggested. You can program in the tabIndex to switch also as you disable the pointer events for the buttons. Returning everything back on click of the reset button.


(Colette Levesque) #10

That’s wonderful! thank you for the help. I have learned something new (and hopefully others have too) and can apply it to all my e-learning projects from now on.