Using input from checkbox to change color of button

问题

I have 5 rows of 30 buttons of green buttons. A modal pops up when a button is clicked. Inside the modal is a checkbox. When the checkbox is checked, I need the button it's in to change to a red color. I've tried a few things, but they haven't worked. Any ideas?

HTML:

            <button type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">number</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Testing</h4>
                        </div>
                        <div class="modal-body">
                            <form role="form">
                                <div class="form-group">
                                    <label for="email">Email address:</label>
                                    <input type="email" class="form-control" id="email">
                                </div>
                                <div class="form-group">
                                    <label for="pwd">Password:</label>
                                    <input type="password" class="form-control" id="pwd">
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox"> Remember me</label>

                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

回答1:

HTML:

Add ids to all your different buttons

<button id="btn1" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">number</button>
<button id="btn2" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">number</button>
<button id="btn3" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">number</button>

Add a class to your checkbox

<div class="checkbox callback-to-button">

JS:

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  $(this).find('.modal').attr('data-triggered', $(button).attr('id'));
})

$('.callback-to-button').click(function() {
    var target = $(this).closest('.modal').attr('data-triggered');
    if ($(this).find('[type=checkbox]').prop('checked')) {
        $('#'+target).css('background-color', 'red');
    }
    else {
        $('#'+target).css('background-color', '');
    }
});

See it in action: here

回答2:

I think you can achieve what you need with jQuery and a few HTML tweeks.

Update your buttons to include a unique attribute, such as data-id:

<button type="button" class="btn btn-primary btn-xs gridbtn" **data-id="btn1"** data-toggle="modal" data-target="#myModal">number</button>

Add an input field to your modal window:

<input type="hidden" id="btnId" value="">

When your button is clicked, update the input field within your modal window with the data-id value from your button:

$('button').click(function() {
    $('.modal #btnId').val($(this).attr('data-id'));
});

You now have a link between the modal window and the button that was clicked to open it.

Use the following jQuery code to change the colour of the button when the checkbox is checked:

$('.checkbox').change(function() {
        if($(this).is(":checked")) {
            $('button[data-id='+$('#btnId').val()+']').css('color','red');
        }       
    });

Demo here: http://jsfiddle.net/Lpdx3k83/

来源：https://stackoverflow.com/questions/31478551/using-input-from-checkbox-to-change-color-of-button

标签

jquery

html

css

twitter-bootstrap

checkbox