hide or remove checkbox which is on colorbox popup after selected in dropdown

Question

I have dropdown list and checkbox popup(colorbox popup) list in which data comes from complaint.csv file.

complaint.csv File

1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...

I want to hide/remove checkbox from the popup checkbox list when item is selected from dropdown. e.g. if 'complaint type 1' is selected from dropdown then 'complaint type 1' from checkbox list should be removed/hide.

Here is some code.

PHP code:

<label class="question-name" ng-class="{error:hasError()}">
  <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
    Chief 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()}"  onchange="changeEventHandler(event);">
  <option class="hidden" disabled="disabled" value=""></option>

  <?php
    $file_handle = fopen("../complaint.csv", "r");
    while (!feof($file_handle)) {
      $lines_of_text[] = fgetcsv($file_handle, 1024);
    }
    fclose($file_handle);

    foreach ( $lines_of_text as $line_of_text): 
  ?>
      <option value="<?php print $line_of_text[1]; ?>">
        <?php print $line_of_text[1]; ?></option>
      <?php endforeach; ?>
    </select>
    <br/> <br/>

    <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" 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">

       <?php

        // Setup ---------------------------------------------------------------        
        define('numcols',4);  // set the number of columns here
        $csv = array_map('str_getcsv', file('../complaint.csv'));
        $numcsv = count($csv);
        $linespercol = floor($numcsv / numcols);
        $remainder   = ($numcsv % numcols);
        // Setup ---------------------------------------------------------------        


        // The n-column table --------------------------------------------------
        echo '<div class="table">'.PHP_EOL;
        echo '   <div class="column">'.PHP_EOL;

        $lines = 0;
        $lpc   = $linespercol;
        if ($remainder>0) { $lpc++; $remainder--; }
        foreach($csv as $item) {
            $lines++;
            if ($lines>$lpc) {
                echo '   </div>' . PHP_EOL . '<div class="column">'.PHP_EOL;
                $lines = 1;
                $lpc   = $linespercol;
                if ($remainder>0) { $lpc++; $remainder--; }
            }
            echo '      <label class="checkbox" for="checkbox'.$item[0].'" style="font-size:20px;">
                        <input type="checkbox" name="complaint" value="'.$item[1].'" id="checkbox'.$item[0].'" data-toggle="checkbox">'
                            .$item[1].
                        '</label><br />';
        }
        echo '   </div>'.PHP_EOL;
        echo '</div>'.PHP_EOL;
        // The n-column table --------------------------------------------------


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

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

JS code

<script type="text/javascript">
    function changeEventHandler(event) {
        $('.inline').colorbox({onLoad: function() {
            //  alert('You have ' + event.target.value + ' complaint.');
            $('input[type=checkbox][value=' + event.target.value + ']').parent().hide();
        }});
    }
</script>

In above JS code I am getting alert of selected value from dropdown (the line of alert which is commented) but the checkbox item having that selected value is not removing somehow.(for this line $('input[type=checkbox][value=' + event.target.value + ']').parent().hide(); , I am getting just loading icon on popup)

Can anyone please tell me how should I do that?

Note: I am reading data from complaint.csv file for both dropdown list and checkbox popup list in php as shown in above code.

Answer 1

make following changes and check

$('input[type=checkbox][value="' + event.target.value+ '"]').parent().hide();