right-justifying a pseudo-checkbox in Boostrap

I've seen answers to questions about right-justifying checkboxes in Boostrap and I've seen answers to questions about pseudo-classes to use images for checkboxes in Bootstrap (though most of those ignored the overlap of labels, but I digress.)

What I'm looking for is a combination of those things: a right-justified checkbox (with label text to the left of the checkbox) using graphical elements to replace the checkbox.)

Fiddle attached. I added further comments in the 'Javascript' section. Any help would be greatly appreciated, I've been banging my head against the wall for hours trying to make this work, and obviously what I did manage to do is untenable in practice. Thanks in advance.

(Note: the checkbox replacement images are arbitrary, the product of a very quick search for online images to illustrate the difference functionally.)

Fiddle: https://jsfiddle.net/qwucsh6x/8/

Code sample:

<body>
  <div>
    <input id="rjc" type="checkbox" class="pull-right"><label for="rjc" class="pull-right">right-justify checkbox</label>
  </div><div>
    <input id="sc" type="checkbox">
    <label for="sc">standard checkbox</label>
  </div><div>
    <input id="srjc" type="checkbox" class="rightStyled pull-right sr-only">
    <label for="srjc" class="pull-right">styled right-justify checkbox</label>
  </div><div>
    <input id="sty" type="checkbox" class="leftStyled sr-only">
    <label for="sty">styled checkbox</label>
  </div>
</body>

CSS:

input[type=checkbox].leftStyled + label {
    background: url('http://image.flaticon.com/icons/png/128/61/61221.png') no-repeat;
    background-size:20px;
    text-indent:22px
}

input[type=checkbox]:checked.leftStyled + label  {
    background: url('https://cdn2.iconfinder.com/data/icons/menu-interface-1/256/flat_unchecked-128.png') no-repeat;
    background-size:20px;
    text-indent:22px
}

input[type=checkbox].rightStyled + label {
    background: url('http://image.flaticon.com/icons/png/128/61/61221.png') no-repeat;
    background-size:20px;
    text-indent:-162px
}

input[type=checkbox]:checked.rightStyled + label  {
    background: url('https://cdn2.iconfinder.com/data/icons/menu-interface-1/256/flat_unchecked-128.png') no-repeat;
    background-size:20px;
    text-indent:-162px
}

Solution

Might be a little hackier than you're looking for, but I took the text out of the label you have, and put that in a new label that is the label for that image one.

<label for="srjclabel" class="pull-right">styled right-justify checkbox</label>
<label for="srjc" id="srjclabel" class="pull-right"></label>

https://jsfiddle.net/qwucsh6x/9/