CODEWITHSUNDEEP
jquery
Muiter
Muiter

Reputation: 1520

jQuery Toggle classes not toggeling

When a user click an toggle button I would to change all classes with the name textfield to editable_textfield

I am using this toggle button / checkbox

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

When a user click the button there is no change of class, I have here 1 example of this class 

<span class="textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">'.$row_table_1['naam'].'</span>

jQuery is loaded on this page.

$(function() {
    $('#toggle-event').change(function() {
        $(element).toggleClass("textfield editable_textfield");
    })
})

Any suggestions?

Upvotes: 1

Views: 82

Answers (2)

N. M.
N. M.

Reputation: 597

If you want to make the checkbox toggle the span's state, then you would have to execute the toggleClass function on multiple elements, as shown below. I replaced your checkbox value with plain text for the demo and added several span elements including styling to their classes textfield and editable_textfield to demonstrate behavior.

$('#toggle-event').change(function() {
  $('.textfield, .editable_textfield').toggleClass('textfield editable_textfield');
});
span.textfield {
  background: red;
}

span.editable_textfield {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

<span class="textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">Hello World</span>

<span class="textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">Hello World</span>

<span class="editable_textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">Hello World</span>

Upvotes: 1

peeebeee
peeebeee

Reputation: 2618

Not sure where $(element) comes from, mabe copy/paste?

You need a selector for the target span. Maybe an extra class that doesn't change with the toggle?

<span class="toggletarget textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">'.$row_table_1['naam'].'</span>


$(function() {
    $('#toggle-event').change(function() {
        $(".toggletarget").toggleClass("textfield editable_textfield");
    })
})

Upvotes: 0

Related Questions