CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapstyles
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94409

Link two radio buttons in different forms

So I have two radio buttons here, and I'm trying to link them up. Due to the fact that they are in two different forms, they don't seem to work as I expected. The forms are required in Bootstrap in order to display the correct style I desire. Here's a snippet of my code:

<ul class="list-group">
    <li class="list-group-item list-heading">Notification Display Options</li>
    <li class="list-group-item">
        <form class="form-inline" role="form">
            <div class="radio">
                <label>
                    <input type="radio" id="noti_display_time" name="noti_display"> <span trans="shownotificationfor">Shows for</span>
                    <div class="form-group">
                        <input id="show_noti_time" type="number" class="form-control" max="60" min="1" data-requires="noti_display_time">
                    </div>  <span trans="seconds">seconds</span>
                </label>
            </div>
        </form>
    </li>
    <li class="list-group-item">
        <form class="form-inline" role="form">
            <div class="radio">
                <label>
                    <input type="radio" name="noti_display">Close manually
                </label>
            </div>
        </form>
    </li>
</ul>

http://jsfiddle.net/DerekL/4YfB9/show (Do not view it inside the jsFiddle preview window since the style changes as the window size changes)

Is there a solution to this without messing up the style? Thanks.

JavaScript will be my last resort, if there is no workaround.

Upvotes: 0

Views: 248

Answers (1)

charlietfl
charlietfl

Reputation: 171698

Just wrap one form around the <ul>. Using 2 forms just to manage style doesn't make much sense.

<form> 
   <ul/>
</form>

DEMO

Upvotes: 1

Related Questions