时间戳

首页 > 解决方案 > 由于模板中的 css，单选按钮被禁用

javascript - 由于模板中的 css，单选按钮被禁用

问题描述

由于 css 文件，我的单选按钮似乎被禁用。css 由模板提供。我怎么知道问题是由于 css 文件引起的，因为当我注释掉对 css 文件的引用时，我的按钮工作正常。但是我需要 css 文件来使我的网页看起来更好。我尝试注释掉单选按钮的 CSS 样式，但无济于事。

我附上了我的单选按钮的屏幕截图，关于我如何创建它的 jquery，以及模板提供的 css 代码。 在此处输入图像描述

for( answers in allQuestions[i].answer){ //loops through array and dynamically adds answer values to radio buttons
		var radioBtn = $('<input type="radio" class="radios" name="btnAnswers" value="'+ allQuestions[i].answer[j] + '" /><label for ="secondbtn">' 
		                 + allQuestions[i].answer[j] + '</label><br>');
        radioBtn.appendTo('#radios');
     j++
	}

下面是与无线电输入相关的 css

input[type="checkbox"] + label,
input[type="radio"] + label {
  text-decoration: none;
  color: #777;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  padding-left: 2.55em;
  padding-right: 0.75em;
  position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  background: #f8f8f8;
  border-radius: 6px;
  border: solid 1px #e5e5e5;
  content: "";
  display: inline-block;
  height: 1.8em;
  left: 0;
  line-height: 1.725em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.8em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background: #666;
  border-color: #666;
  color: #ffffff;
  content: "\f00c";
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: #e89980;
  box-shadow: 0 0 0 1px #e89980;
}

input[type="checkbox"] + label:before {
  border-radius: 6px;
}

input[type="radio"] + label:before {
  border-radius: 100%;
}

任何帮助表示赞赏，谢谢。

标签： javascriptjqueryhtmlcss

解决方案

您没有id在输入元素上使用，因为应该for在.labelinputid

推荐阅读