Modify the color of chips when the checkbox is toggled in Materialize CSS

Question

Modify the color of chips when the checkbox is toggled in Materialize CSS

I have been scouring the internet for a solution to my issue.

Currently, I am working with materialize css chips and I am trying to achieve a specific functionality. I want the color of the last chip to turn green and the rest to turn red when a checkbox is checked. When the checkbox is unchecked, all the chips should turn red. I'm not sure if this can be accomplished given my current set of conditions.

$('.chips-placeholder').chips({
    placeholder: 'Enter options',
    secondaryPlaceholder: '+Options',
    limit:6
});

$(document).ready(function() {
    $('#anscheck').change(function() {
        if($("#anscheck").is(":checked")){

        }    
    });
});

html

                   <div class="row opt">
                       <div class="col m4 s10 offset-m3 chips-placeholder">
                           <input type="text" name="opts[]">
                       </div>
                       <div class="col m4 s10 switch correctans">
                        <label>
                          Off
                          <input type="checkbox" id='anscheck'>
                          <span class="lever"></span>
                          On
                        </label>
                       </div>
                   </div>

javascript jquery css materialize

Answer 1

Answer №1

Edit: Modify onChipAdd and onChipDelete events to change the color when a chip is added or deleted.

I want to initialize the chip component without using the jQuery method.

1) Retrieve all the chips.

$(chipInstance[0].$chips)

2) Iterate through each chip and determine if the (index+1) of the chip matches the total number of chips. (Considering indexing starts at zero.)

allChips.each(function(index, element){
  let Color = (index+1) == allChips.length ? 'green' : 'red';
  $(element).addClass(Color)
})

3) Apply a class to change the font color.

Here's a demonstration:

let target = $('.chips-placeholder');
let options = {
  placeholder: 'Enter options',
  secondaryPlaceholder: '+Options',
  limit: 6,
  onChipAdd: function(){
    CheckChipsColor();
  },
  onChipDelete: function(){
    CheckChipsColor();
  }
}

let chipInstance = M.Chips.init(target, options)

$('#anscheck').change(function() {
  CheckChipsColor();
});

function CheckChipsColor(){
  let allChips = $(chipInstance[0].$chips);
  allChips.removeClass('red green');
  if ($("#anscheck").is(":checked")) {
    allChips.each(function(index, element){
      let Color = (index+1) == allChips.length ? 'green' : 'red';
      $(element).addClass(Color)
    })
  }
}

.red{
  color: red;
}

.green{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<div class="row opt">
  <div class="col m4 s10 offset-m3 chips-placeholder">
    <input type="text" name="opts[]">
  </div>
  <div class="col m4 s10 switch correctans">
    <label>
    Off
      <input type="checkbox" id='anscheck'>
      <span class="lever"></span>
    On
    </label>
  </div>
</div>

Answer 2

Edit: Modify onChipAdd and onChipDelete events to change the color when a chip is added or deleted.

I want to initialize the chip component without using the jQuery method.

1) Retrieve all the chips.

$(chipInstance[0].$chips)

2) Iterate through each chip and determine if the (index+1) of the chip matches the total number of chips. (Considering indexing starts at zero.)

allChips.each(function(index, element){
  let Color = (index+1) == allChips.length ? 'green' : 'red';
  $(element).addClass(Color)
})

3) Apply a class to change the font color.

Here's a demonstration:

let target = $('.chips-placeholder');
let options = {
  placeholder: 'Enter options',
  secondaryPlaceholder: '+Options',
  limit: 6,
  onChipAdd: function(){
    CheckChipsColor();
  },
  onChipDelete: function(){
    CheckChipsColor();
  }
}

let chipInstance = M.Chips.init(target, options)

$('#anscheck').change(function() {
  CheckChipsColor();
});

function CheckChipsColor(){
  let allChips = $(chipInstance[0].$chips);
  allChips.removeClass('red green');
  if ($("#anscheck").is(":checked")) {
    allChips.each(function(index, element){
      let Color = (index+1) == allChips.length ? 'green' : 'red';
      $(element).addClass(Color)
    })
  }
}

.red{
  color: red;
}

.green{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<div class="row opt">
  <div class="col m4 s10 offset-m3 chips-placeholder">
    <input type="text" name="opts[]">
  </div>
  <div class="col m4 s10 switch correctans">
    <label>
    Off
      <input type="checkbox" id='anscheck'>
      <span class="lever"></span>
    On
    </label>
  </div>
</div>

Modify the color of chips when the checkbox is toggled in Materialize CSS

Answer №1

Similar questions

Function call fails when parameters are passed

Tips for maintaining the chat scroll position while typing on mobile devices

The output is not shown because the form data is not being generated properly by document.getElement

Preventing users from selecting both future and current dates in a Bootstrap datepicker: A Step-by-Step Guide

What methods can I use to prevent a JavaScript array from getting filled during page loading?

Implementing Content-Security-Policy for a web application embedded in an iframe

After deploying to Firebase, animations suddenly cease to function

Issues with jQuery tabs "load" function not functioning properly

The div is set to a position of absolute, causing the overflow-y property to be set to auto. As a

Guide to modifying the background image color using CSS

Create a specific part of a webpage that can be scrolled through

Why does TypeScript keep throwing the "No inputs were found in the config file" error at me?

Search through array elements that are nested deeply

Please confirm the modal by adding a textarea with a newline in SweetAlert2

The error message "Unexpected token var Node.js" means that there is a syntax error

Having trouble with AJAX file uploading in CodeIgniter?

Strategies for resolving a mix of different data types within a single parameter

What is the best way to assign an ngModel dynamically using a dot-separated path?

What is the process for importing a JavaScript file into a Vue component?

JavaScript: Specialized gravity diagram