CODEWITHSUNDEEP
css
SuperDJ
SuperDJ

Reputation: 7661

Unable to click checkboxes after styling

I have tried to style some checkboxes but now I can't click on/ activate/ check them. Radio buttons that are mostly styled the same way do work.

$(document).ready(function() {
	var $selection = $('.sc-checkbox');

	$selection.each(function() {
		var $this = $(this),
		    $id = $this.attr('id');

		$this.after( '<label for="' + $id + '"></label>' );
	});
});
input[type="checkbox"].sc-checkbox {
    -webkit-opacity: 0;
    opacity: 0;
    left: -102%;
    position: absolute
}
input[type="checkbox"].sc-checkbox+label{
  padding: 0 5px 0 10px;
}
input[type="checkbox"].sc-checkbox+label:before {
    content: '';
    display: inline-block;
    background: transparent;
    border: .14286rem solid rgba(0, 0, 0, 0.54);
    width: .92857rem;
    height: .92857rem;
    border-radius: .14286rem;
    font-family: 'Material Icons';
    position: relative;
    vertical-align: middle;
    left: 0;
    line-height: .92857rem;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

input[type="checkbox"].sc-checkbox:checked+label:before {
    background: #3f51b5;
    border: .14286rem solid #3f51b5;
    content: '\E5CA';
    color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<input type="checkbox" class="sc-checkbox" id="test"></label><label for="test">Test</label>
<input type="checkbox" class="sc-checkbox" id="test1" checked></label><label for="test1">Test1</label>

When you run the example everything works but on my website it doesn't work. I have fiddled around with positions, paddings and margins on the :before but nothing seems to be working.

I hope someone can help me make the checkboxes work again.

Thanks in advance.

Upvotes: 3

Views: 1820

Answers (1)

Dekel
Dekel

Reputation: 62676

You have a code that fixes a bug when text field isn't selected when label is clicked:

textfields.js, line 30:

// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
    var $id = $(this).attr('for');
    $('#'+$id).trigger('click');
});

However this code cause your click on the label to be triggered twice, so you get two clicks on the checkbox (which causes your checkbox to be checked and then unchecked immediately, or the opposite).

I'm not sure if you really need this code or not, but you can change your fix-bug to something like this:

// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
    var $id = $(this).attr('for');
    if ($('#'+$id).is(':checkbox')) {
        return;
    }
    $('#'+$id).trigger('click');
});

Upvotes: 4

Related Questions