How to set condition in modal

Question

I need help here. I dont know what is the problem but the 1st modal is popping up while the 2nd one is not.

My program works like this.

1. Both of my modal should be clickable after it was close but when it open again the checkbox checked should retain like my first modal.

2. What i want to do on my 2nd modal is that I want it to behave like radio button, meaning I can only choose 1 checkbox and it will retain its value when i reopen it again.

Please check also my working fiddle: https://jsfiddle.net/fe73awsu/10/

Here is my code: test.php

    <form method="post" name="testform" action="">

    <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
        Label 1<input readonly type="text" name="txt1" placeholder="inputTest">     
    </a>

  <br><br>

  <a href="#moda2"> <!-- when the input textbox was clicked, modal will pop up -->
        Label 2<input readonly type="text" name="txt2" placeholder="inputTest">     
    </a>

<!-- modal starts here -->
    <div class="modalwrapper" id="modal">   <!-- modal -->
            <div class="modalcontainer">    
                <div class="modalcol1">
                    <label>Test 1</label>
                    <input type="checkbox" name="test_modal[]" value="1">
                    <div class="clear"></div>
                    <label>Test 2</label>
                    <input type="checkbox" name="test_modal[]" value="2">
                    <div class="clear"></div>
                    <label>Test 3</label>
                    <input type="checkbox" name="test_modal[]" value="3">
                    <div class="clear"></div>
                    <label>Test 4</label>
                    <input type="checkbox" name="test_modal[]" value="4">
                    <div class="clear"></div>
                    <label>Test 5</label>
                    <input type="checkbox" name="test_modal[]" value="5">
                    <div class="clear"></div>

                    <div class="savebutton">
                        <button class="btn1" type="button" value="Submit">Submit</button>
                    </div>
                </div> <!-- close modalcol1 -->
            </div> <!-- close modalcontainer -->
        <div class="overlay"></div>
    </div> <!-- close modalwrapper -->


    <div class="modalwrapper" id="modal2">   <!-- modal -->
            <div class="modalcontainer">    
                <div class="modalcol1">
                    <label>Mango</label>
                    <input class="radio" type="checkbox" name="fruit1" value="1">
                    <div class="clear"></div>
                    <label>Banna</label>
                    <input class="radio" type="checkbox" name="fruit2" value="2">
                    <div class="clear"></div>
                    <label>Grapes</label>
                    <input class="radio" type="checkbox" name="fruit3" value="3">
                    <div class="clear"></div>               
                    <div class="savebutton">
                    <button class="btn1" type="button" value="Submit">Submit</button>
                    </div>
                </div> <!-- close modalcol1 -->
            </div> <!-- close modalcontainer -->
        <div class="overlay"></div>
    </div> <!-- close modalwrapper -->
</form>

my javascript

 $(document).on("click","input[name='txt1']", function()
{
    $('#modal').show();
});

$(document).on("click","input[name='txt2']", function()
{
    $('#modal2').show();
});

$(document).on("click",".btn1", function(){
   $('#modal').hide();
});

$(".radio").change(function() {
        $(".radio").prop('checked', false);
        $(this).prop('checked', true);
    });

Please check also my working fiddle: https://jsfiddle.net/fe73awsu/10/

Can u also clean my codes?

Answer 1

Each modal must have a unique id and Each link can refer to a unique modal-id.

...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-     labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

Your code had issue with ID's for modal window as well buttons to close it. I have fixed it here : https://jsfiddle.net/raviroshan/g77ngpat/1/