CODEWITHSUNDEEP
javascripthtmltwitter-bootstraptwitter-bootstrap-3
Csharpnoob
Csharpnoob

Reputation: 41

Radio button not selecting option

Please forgive any misunderstanding; I am fairly new to HTML/Bootstrap.

I have a group of radio buttons each with their own label that a user can select. The label itself (which Bootstrap treats as a button?) is clickable, however, the radio button is not clickable, but still highlights the corresponding label. Would anyone have a fix for this? I need to be able to click anywhere on the answer (label or radio button) and show the radio button and label as selected. I've tried everything I can think of... Here is some example code of what I'm doing: 

<div class="col-sm-12">
  <div class="btn-group btn-group-toggle btn-group-lg btn-group-justified" data-toggle="buttons">
    <div class="form-group">
      <label class="btn btn-default btn-lg btn-block" style="text-align:left; white-space:normal;">
        <input type="radio" name="Q1" id="A1"
          value="TEST TEXT." 
          style="margin-left:10px;" required/> &nbsp;&nbsp;TEST TEXT
      </label>
    </div>
    <div class="form-group">
      <label for="Q1A2" class="btn btn-default btn-lg btn-block" style="text-align:left; white-space:normal;">
        <input type="radio"  name="Q1" id="A2" 
          value="TEXT TBD" 
          style="margin-left:10px;" required />&nbsp;&nbsp;TEXT TBD
      </label>
    </div>

Upvotes: 0

Views: 4094

Answers (2)

MajiD
MajiD

Reputation: 2575

this is it. the for attribute of the label should be equal to the id attribute of input.

also btn classes are for buttons not radio and checkbox

label {
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
}

label:hover {
  background-color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-12">
  <div class="form-group">
    <label for="A1">
        <input type="radio" name="Q1" id="A1" value="1" required checked/> TEST TEXT
      </label>
  </div>
  <div class="form-group">
    <label for="A2">
        <input type="radio" name="Q1" id="A2" value="2" required/> TEXT TBD
      </label>
  </div>
</div>
</div>

Upvotes: 1

Erik
Erik

Reputation: 108

for="Q1A2"

This shouldn't be a combination of the name and the id. Make the name unique and apply the label's for attribute.

<label for="item1">Item1</label><input type="radio" name="item1" style="margin-left:10px;" required />
<label for="item2">Item2</label><input type="radio" name="item2" style="margin-left:10px;" required />

Upvotes: 1

Related Questions