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? Commented Nov 5, 2015 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
    Commented Nov 5, 2015 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
    Commented Nov 6, 2015 at 14:28
  • @Rao, did you have a chance to try this out? I am still unable to get it to work.
    – Allen Mann
    Commented Nov 9, 2015 at 13:20
  • @AllenMann yes i did end up getting a solution for this will post it in a bit
    – Rao
    Commented Nov 9, 2015 at 15:39

2 Answers 2

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
    Commented Nov 9, 2015 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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .