Question

我在具有相同类名的不同表行中有几个复选框。我希望一次只能选择一个。我正在尝试跟随但没有任何工作，

$('.sev_check').click(function() {

                $('.sev_check').not(this).prop('checked', false);
});

，或者

$('.sev_check').click(function() {
    $cur=$(this).prop('checked');
    $(".sev_check").each(function(){ 
       $(this).prop('checked',false);
    })
    $(this).prop('checked', $cur);  
});

以下是我的复选框的对齐方式，

HTML，

<div class="checkbox text-center">
    <label class="form-checkbox form-icon">
        <input id="s_fac" type="checkbox" class="sev_check">
    </label>
</div>

Answer 1

你的方法很好，尝试小提琴

import numpy as np
import pandas as pd
from scipy.optimize import curve_fit

X = np.random.randn(100, 4)     # independent variables
m = np.random.randn(4)          # known coefficients
y = X.dot(m)                    # dependent variable

df = pd.DataFrame(np.hstack((X, y[:, None])),
                  columns=['A', 'B', 'C', 'D', 'Z_real'])

def func(X, *params):
    return np.hstack(params).dot(X)

popt, pcov = curve_fit(func, df[['A', 'B', 'C', 'D']].T, df['Z_real'],
                       p0=np.random.randn(4))

print(np.allclose(popt, m))
# True

这是一个显示它正常工作的小提琴：https://jsfiddle.net/ruidfigueiredo/h3kfj2n9/2/

Answer 2

你的第一种方法对我有用，就像你可以在片段中看到的那样，但你可以使用不同的方法，如：

$(function () {
   $('.sev_check').change(function(e) {
       e.preventDefault();
       $('.sev_check').not(this).prop('checked', false);
       $(this).prop('checked', true);
   });
});

$(function () {
  $('.sev_check').click(function(e) {
    $('.sev_check').not(this).prop('checked', false);
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
    <form role="form">
        <div class="checkbox text-center">
            <label class="form-checkbox form-icon" for="s_fac">
                <input id="s_fac" type="checkbox" class="sev_check">
            </label>
        </div>
        <div class="checkbox text-center">
            <label class="form-checkbox form-icon" for="s_fac1">
                <input id="s_fac1" type="checkbox" class="sev_check">
            </label>
        </div>
        <div class="checkbox text-center">
            <label class="form-checkbox form-icon" for="s_fac2">
                <input id="s_fac2" type="checkbox" class="sev_check">
            </label>
        </div>
    </form>
</div>

Answer 3

编辑： 从所有复选框开始看起来它们被禁用，一旦选中了复选框，它就会显示为选中而其他复选框显示为禁用，当单击另一个复选框时，其中一个复选框显示为选中而其他复选框显示为使用输入元素的不透明度值禁用。

查看下面的我的代码：

.selected {
  opacity: 1
}
.unselected {
  opacity: 0.5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox text-center">
  <table border="2">
    <tr>
      <td>Value 1</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 2</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 3</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 4</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 5</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
  </table>
</div>

{{1}}

在bootstrap中只选择一个复选框

3 个答案: