表格内的一组单选按钮

Question

我正在尝试实现时间表(对医生的在线记录)。我的代码是：

<div class="container">
    <div class="record-container">
        <div class="time-container" style="padding-top:5px">
            <div class="time-table btn-group" data-toggle="buttons">
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:00</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">11:00</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">12:00</label></div>
                </div>
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:20</label></div>
                    <div class="rec-time"><label class="btn btn-block busy-time disabled"><input type="radio">11:20</label></div>
                    <div class="rec-time"><label class="btn btn-block busy-time disabled"><input type="radio">12:20</label></div>
                </div>
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:40</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">11:40</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">12:40</label></div>
                </div>
            </div><!--time-table-->
        </div> <!--time-container-->
    </div> <!--record-container-->
</div> <!--container-->

CSS：

.record-container {
  width: 100%;
  height: 440px;
 }
.time-container {
  margin-left: 240px;
  height: 240px;
}
.time-table {
  display: table;
  width: 100%;
  height: 100%;
}
.time-table-row {
  display: table-row;
}
.rec-time {
  display: table-cell;
  width: 11%;
  vertical-align: bottom;
  padding: 5px 5px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
}
.btn {
  font-size: 16px;
  font-weight: 180;
  width: 82px;
}
.free-time {
  background: #5ece52;
}
.busy-time {
  background: #de0000;
}

第一个问题是按钮的外观。第二个是按钮不在组中。我发现这是因为<div class="rec-time">。我已经尝试了很多布局，但是我不能到达表格，就像现在一样，还有一组单选按钮(看起来像按钮)。

如何修复它？

更新:第二个问题实际上是缺少name和id属性。至于按钮的外观，我必须向元素<input ...>添加一个属性style="display:none"来删除单选按钮的图标。但是我不明白为什么父元素(display: table-row;和display: table-cell;)的样式会有这样的影响？

Answer 1

这里的一个错误(与样式无关，但与输入的功能相关)是单选按钮没有name属性或列出的值。为了注册任何活动，他们需要这些。例如：

<input type="radio" name="bookingTime" value="10:00"/>

否则，当您的用户提交表单时，它们将不会注册任何结果，并且因为它们没有通用的名称，所以用户当前可以选择任意数量的结果。然而，单选按钮的前提是一次只能选择一个-这是通过使用单个名称所有按钮来实现的，因此选择不同的按钮确实会更改与该输入名称相关联的值。

Answer 2

正如Gav上面评论的那样，单选按钮必须有ID和名称。您必须使用属性'for‘设置标签，该属性与单选按钮的ID相匹配。

示例：

<input type="radio" id="radio-1" name="radios" value="A" />
<label for="radio-1">A</label>

<input type="radio" id="radio-2" name="radios" value="B" />
<label for="radio-2">B</label>

即使您的输入嵌套在标签中，您仍然需要为每个输入指定一个ID。name属性可以是公共的。