3

I have tried using

Component Markup:

<div class="container">    
        <form>
            <table class="votingTableBlock">
                <div id="ratingArea">
                    <tbody>
                        <tr>
                            <td>
                                <span>Was this article helpful?</span>
                            </td>
                            <td>
                                <div class="voteBlock">
                                    <div class="upVote">
                                        <ui:inputCheckbox aura:id="voteUp" label="Yes"
                                                          value="{!v.newVote.upVote__c}" click="{!c.toggleClass}"/>
                                    </div>
                                    <div class="downVote">    
                                        <ui:inputCheckbox aura:id="voteDown" label="No"
                                                          value="{!v.newVote.downVote__c}" click="{!c.toggleClass}"/>
                                    </div>
                                    <div class="hiddenURLField">
                                    <ui:inputText aura:id="articleURL" value="{!v.newVote.Article_URL__c}" />
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                                <div class="commentBlock">
                                    <div aura:id="commentsTarget" class="commentsArea"><span class="commentQuestion">Please feel free to provide any feedback or suggestions.</span><br></br>
                                        <ui:inputTextArea aura:id="comments"
                                                          value="{!v.newVote.Comments__c}"/>
                                        <td>
                                            <ui:button label="Submit" labelClass="label"
                                                       press="{!c.createVote}"/>
                                        </td>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </div>

            </table>
        </form>
    </div>

CSS:

    .THIS input[type="checkbox"] {
    display: none;
}

.THIS .check span {
    margin: 20px;
}

.THIS .voteBlock {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url('/resource/voteUp') top left;
        cursor: pointer;
}

to hide the checkbox elements in my form to replace them with an image but I am not having any luck. I can bring in my image but can't hide the checkboxes.

Has anyone tried this in lightning?

5
  • Does the sample code at Checkboxes in the Dev Guide work for you? Nov 5 '15 at 19:25
  • @allen mann can you post your component too, do you want the checkbox label as image and do you want to toggle it based on checkbox value/
    – Rao
    Nov 5 '15 at 22:32
  • @Rao, I updated my post to include the component. I am trying to replicate the rating tool used at the bottom of this article: help.salesforce.com/apex/…
    – Allen Mann
    Nov 6 '15 at 14:28
  • @Rao, did you have a chance to try this out? I am still unable to get it to work.
    – Allen Mann
    Nov 9 '15 at 13:20
  • @AllenMann yes i did end up getting a solution for this will post it in a bit
    – Rao
    Nov 9 '15 at 15:39
1

Found a way to fix this by wrapping the UI components in a label. Also, switched them to radios instead of checkboxes, made more sense for my scenario.

1
  • yep I saw the resulting html was a <div> <label> </label> <input></input> </div>. Decided to try jquery without altering the DOM
    – Rao
    Nov 9 '15 at 17:10
0

This is the way I approached the issue. A little deviant from your approach.

I have used jquery just for my learning purpose you can do it without jquery route.

Component:

<aura:component >
    <ltng:require scripts="/resource/jquery" afterScriptsLoaded="{!c.checkboximage}"/>
    <div class="voteBlock">
        <div class="upVote">
            <button type="button" id="upvoteclick">
                <img src="/resource/upvote"  height="50" width="50"/> 
            </button>
            <ui:inputCheckbox aura:id="voteUp"/>
        </div>
        <div class="downVote">  
            <button type="button" id="downvoteclick">
                <img src="/resource/downvote"  height="50" width="50"/> 
            </button>
            <ui:inputCheckbox aura:id="voteDown"/>
        </div>
    </div>         
</aura:component>

Controller:

({
    checkboximage : function(component, event, helper) {    
       helper.helperMethod(component); 
    }

})

Helper:

({
    helperMethod : function(component) {
        //I have hidden the checkboxes to use the image as checkbox. Take the comment out to see cheboxes being checked and unchecked.
        $("input[type=checkbox]").hide();  
        $('#upvoteclick').click(function(){
            var upvote_val = component.find("voteUp");
            var downvote_val = component.find("voteDown");
            upvote_val.set("v.value",true);
            downvote_val.set("v.value",false);
            alert('upvote val:   '+ upvote_val.get("v.value") +'  Downvote val:  '+downvote_val.get("v.value"));
        });
        $('#downvoteclick').click(function(){
            var upvote_val = component.find("voteUp");
            var downvote_val = component.find("voteDown");
            upvote_val.set("v.value",false);
            downvote_val.set("v.value",true);
            alert('upvote val:   '+ upvote_val.get("v.value") +'  Downvote val:  '+downvote_val.get("v.value"));
        });
    }
})

Ouput:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.