+ Start a Discussion
Hussein Azeez 2Hussein Azeez 2 

Hi all I have VF search page and it has a list of products I only want to disable the other products when one product selected. The page is VF and JS code.

User-added image
                                 <tbody>
                                    <apex:repeat value="{!SearchResult}" var="SearchProduct">
                                        <tr>
                                            <td><apex:inputCheckbox value="{!SearchProduct.Selected}"/></td>
                                            <td>{!SearchProduct.ArticleNumber}</td>
                                            <td>{!SearchProduct.ProductName}</td>
                                            <td>{!SearchProduct.PowerinKW}</td>
                                            <td>{!SearchProduct.Vacuuminmbar}</td>
                                            <td>{!SearchProduct.Airvolume}</td>
                                            <td>{!SearchProduct.FilterSize}</td>
                                            <td><button class="bsbtn bsbtn-xs" data-toggle="modal" data-
                                            target="#ProductInformation" data-dismiss="modal" type="button" 
                                   onclick="ProductInfoModal('{!SearchProduct.ProductDescription.Product2.Id}');">
                                           <span class="glyphicon glyphicon-question-sign"></span></button></td>
                                        </tr>
                                    </apex:repeat>
                                </tbody>

 
Best Answer chosen by Hussein Azeez 2
Mustafa JhabuawalaMustafa Jhabuawala
Hussein,

What do you mean by disabling other products ?

Do you want to disabled checkboxes of other products ?

If yes then try following approach -
  1. Handle onclick event on apex:inputCheckbox
  2. Call a javascript method onclick event
  3. Apply similar style class to all the apex:inputCheckbox 
I have created a fiddle very similar to your problem statement. Kindly refer this and try to implement the same in visualforce page.

Fiddle (https://jsfiddle.net/mustafajhabuawala/eobp2a0g/)

Hope this helps.

All Answers

Mustafa JhabuawalaMustafa Jhabuawala
Hussein,

What do you mean by disabling other products ?

Do you want to disabled checkboxes of other products ?

If yes then try following approach -
  1. Handle onclick event on apex:inputCheckbox
  2. Call a javascript method onclick event
  3. Apply similar style class to all the apex:inputCheckbox 
I have created a fiddle very similar to your problem statement. Kindly refer this and try to implement the same in visualforce page.

Fiddle (https://jsfiddle.net/mustafajhabuawala/eobp2a0g/)

Hope this helps.
This was selected as the best answer
Hussein Azeez 2Hussein Azeez 2
Thank you, Mustafa,

Yes, I meant to disable the other checkboxes.

I don't have another apex:inputCheckbox, it just one and there is a apex:repeat because it's dynamic search page.

 
Mustafa JhabuawalaMustafa Jhabuawala
Yes I understood. You need to apply a class to the apex:inputCheckbox written inside the apex:repeat and then write the code which I have shared you on fiddle(in the above post).

Let me know if you are able to do else I will prepare a sample visualforce page and share with you.
 
Hussein Azeez 2Hussein Azeez 2
Well for some reason I couldn't add a  class attribute to apex:inputCheckbox. I added the whole table part here: 
<div class="clearfix" style="margin-top:20px;"></div>
                        <apex:outputPanel styleClass="modal-body" id="divSearchTable" layout="block">
                            <table id="SearchTable" class="table table-striped table-bordered divSearchClass">
                                <thead>
                                    <tr>
                                        <th>Select</th>
                                        <th>Article Number</th>
                                        <th>Product Name</th>
                                        <th>Power in kw</th>
                                        <th>Vacuum in mbar</th>
                                        <th>Airvolume cbm/h</th>
                                        <th>Filter Size</th>
                                        <th>Sales Text</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <apex:repeat value="{!SearchResult}" var="SearchProduct">
                                        <tr>
                                            <td><apex:inputCheckbox onclick="ready(this)"  value="{!SearchProduct.Selected}"/></td>
                                            <td>{!SearchProduct.ArticleNumber}</td>
                                            <td>{!SearchProduct.ProductName}</td>
                                            <td>{!SearchProduct.PowerinKW}</td>
                                            <td>{!SearchProduct.Vacuuminmbar}</td>
                                            <td>{!SearchProduct.Airvolume}</td>
                                            <td>{!SearchProduct.FilterSize}</td>
                                            <td><button class="bsbtn bsbtn-xs" data-toggle="modal" data-target="#ProductInformation" data-dismiss="modal" type="button" onclick="ProductInfoModal('{!SearchProduct.ProductDescription.Product2.Id}');"><span class="glyphicon glyphicon-question-sign"></span></button></td>
                                        </tr>
                                    </apex:repeat>
                                </tbody>
                            </table>
                        </apex:outputPanel>
                    </apex:outputPanel>
Mustafa JhabuawalaMustafa Jhabuawala
There is no attribute named as class on apex:inputCheckbox.

The attribute name is styleClass
Hussein Azeez 2Hussein Azeez 2
Thank you, it works now but there an issue when I select checkbox it disable the others but if I deselect it and select another one it will not disable the previous one and this will keep going till nothing will be disabled.
Mustafa JhabuawalaMustafa Jhabuawala
Great.

In that case you have missed some code. Cross check the fiddle again there is a piece of code to add class name - 
$(this).addClass("sample");

Let me know if this works for you.
Hussein Azeez 2Hussein Azeez 2
It's working now Thank you so much.
Mustafa JhabuawalaMustafa Jhabuawala
Perfect :)