我有以下html代码，它使用twitter bootstrap框架，我无法选择输入字段，当我点击它时它的焦点被删除，而且我也无法选择单选按钮。即使我选择一个，它移动到第一个单选按钮，我无法选择第二个。请帮我解决这个问题。主要的是，这是发生在Firefox浏览器和Chrome和IE工作正常！
<form action="test.php" style="border: solid 1px #eee;box-shadow: 10px 10px 5px #888888;margin-top:20px" class="panel-body" method="POST" id="myForm" data-validate="parsley">
<div id="alert" style="display:none" class="alert alert-danger text-center">Please enter a valid card number !</div>
<div>
<div class="col-md-4">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC"><label for="radio43" class="css-label cb3">Credit Card</label>
</div>
<div class="col-md-4">
<input type="radio" name="cardType" id="one" class="" value="DB"><label for="radio53" class="css-label cb3">Debit Card</label>
</div>
<div class="col-md-4">
<img src="certificate.png" width="120" class="bw">
</div>
</div>
<!-- Card Payment -->
<div id="a">
<br>
<br>
<br>
<input type="hidden" id="ccType" name="ccType">
<ul style="float:right;display:none" class="cards">
<li class="visa"></li>
<li class="visa_electron"></li>
<li class="mastercard"></li>
<li class="maestro"></li>
</ul>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputEmail1">Card number</label>
<div class="fake-input">
<input type="text" class="form-control zwitch_data" autocomplete="off" data-required="true" data-trigger="change" id="ccnumber" name="ccnumber" onblur="testCreditCard () ">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputPassword1">CVV</label><input type="password" maxlength="4" class="form-control" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Month</label>
<select name="expiry_month" class="form-control" data-required="true" data-trigger="change">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Year</label>
<select name="expiry_year" class="form-control" data-required="true" data-trigger="change">
<option selected="" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputPassword1">Name on Card</label><input type="text" class="form-control" name="name_on_card" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="ak" value="">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="app" value="Checkout">
<input type="hidden" name="orderID" value="123456">
<input type="hidden" name="email" value="">
<input type="hidden" name="mobileNo" value="9999999999">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block m-b-sm">Pay</button>
</div>
</div>
</div><!-- Card payments ends here -->
答案 0 :(得分：0)
我发现您发布的代码本身没有任何问题。
我个人更喜欢在没有for =＆＃34;＆＃34;的情况下将标签标签中的无线电输入按钮包裹起来。属性。这使得点击文本也可以选择单选按钮。像这样：
<label class="css-label cb3">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC">
Credit Card
</label>
我在this jsfiddle中测试了您的代码（已授予，我添加了单选按钮更改），它似乎正常工作。您的代码中必须存在导致问题的其他内容。您可以尝试发布指向开发网站的链接。
答案 1 :(得分：0)
我遇到了同样的问题。不要使用“contenteditable ='true'”属性。
错误示例：
<div class="input" contenteditable="true">
<label for="RadioOne"><input type="radio" value="val1" name="radio" id="RadioOne">Radio 1</label>
<label for="RadioTwo"><input type="radio" value="val2" name="radio" id="RadioTwo">Radio 2</label>
</div>
在您的情况下，如果它不是“contenteditable”搜索可能会干扰的其他属性。
答案 2 :(得分：0)
我认为问题出在你的问题中，而不是代码中。单选按钮都具有相同的名称，并被视为一个组。这就是为什么用标签选择第一个，然后用箭头键到达各个按钮的原因。我可能误解了这个问题，但我希望它有用。
克