jeudi 28 janvier 2016

how to show item selected from dropdown should not appear in checkbox list

enter image description here

On my page there is a dropdown list of items(Main Complaint) and a checkbox list on popup(Additional Complaint) as shown in above image.

Popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):

enter image description here

HTML code

 <label class="question-name" ng-class="{error:hasError()}">  <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span>  <span class="icon-required" ng-show="question.required"></span>  </label>

<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
   <option class="hidden" disabled="disabled" value=""></option>
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
        <option value="Five">Five</option> 
        <option value="Six">Six</option> 
        <option value="Seven">Seven</option> 
        <option value="Eight">Eight</option> 
</select>


 <label class="question-name" ng-class="{error:hasError()}">  <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span>  <span class="icon-required" ng-show="question.required"></span>  </label>

         <div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
       <div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>

  <div style='display:none'>
   <div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
    <div class="added">

        <div class="column-left">
                <label class="checkbox" for="checkbox1" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
                One
                </label>
                <br/>
                <label class="checkbox" for="checkbox2" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
                Two
                </label>
                <br/>
        </div>

        <div class="column-center">
                <label class="checkbox" for="checkbox3" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
                Three
                </label>
                <br/>
                <label class="checkbox" for="checkbox4" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
                Four
                </label>
                <br/>
        </div>

        <div class="column-center-right">
            <label class="checkbox" for="checkbox5" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
            Five
            </label> 
            <br/>
            <label class="checkbox" for="checkbox6" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
            Six
            </label> 
            <br/>
        </div>

        <div class="column-right">
            <label class="checkbox" for="checkbox7" style="font-size:20px;">
            <input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
            Seven
            </label> 
            <br/>
            <label class="checkbox" for="checkbox8" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
            Eight
            </label> 
            <br/>
        </div>

    </div> 
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form> 

</div>
</div>

Question:

If 'One' item is selected from dropdown list of Main Complaint, then in Additional Complaint checkbox list that 'One' item should not appear like below but the empty space also should not be there.

enter image description here

Can anyone please tell me, how do I get that using Jquery/JS?

Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire