Interactive Rating Component using Bootstrap CSS

Community feedback

• 

  Priya Aggarwal•160

  @pa-aggarwal

  Posted about 3 years ago

  Hey,

  Your solution looks good and it responds appropriately to the screen size which is great!

  For your question about how to deselect a button when another is clicked, instead of using the <button> element for the ratings from 1-5, you can use multiple input[type="radio"] elements and give them the same name attribute. This basically allows only one item to be checked at a time.

  I hope that helps answer your question :)

  20
• 

  Umair•240

  @umairanwer

  Posted about 3 years ago

  A good solution to your problem is already provided. There is another solution to this issue, if you want to use <button>.

  • In your CSS create styles for a class "selected-btn"
  • Set the styles of this class to the ones you selected in your js code (background-color and color). And remove them from js code.
  • Now whenever a btn is clicked, first loop through all the buttons and remove 'selected-btn' class from them.
  • After this add the 'selected-btn' class to the clicked button.

  Hope this helps. Feel free to ask any questions.

  10