Question

我有一个HTML代码，每个div中有7个框。下面是html代码。

avg<- function(x) { s <- sum(x) n <- length(x) s/n }

1）现在，如果我选中“证书”复选框，则所有其他应自动禁用。

2）如果选中了“系统验证”（其他所有选项均自动选中并显示为灰色）（“否”则显示验证且显示为灰色）

3）如果单独选择了其他选项，则（“否”和“灰色”则为“认证和系统验证”）

请让我知道如何获得功能

下面是我尝试过的代码。

<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
          <div class="panel-body">
            <div class="col-md-6 col-sm-6 col-xs-12 ">            
              <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
											<label>Certification</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
              <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
											<label>Functional</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
											<label>LCM</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px"  />
											<label>Performance</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
											<label>Resilience</label>
            </div>            
             <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px"  />
											<label>Security</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
											<label>System verification</label>
            </div>

上面为选项1和2工作。对于第三个选项，您能给我最好的解决方法吗。

Answer 1

此演示仅实现其中Certification的检查禁用了所有其他功能的功能之一。希望您能够实现另外两个

在这里选择是否选中名称为validationTypesDone的输入的jquery选择器并且如果id为validationTypeCertification，则使用其他名称获取所有其他输入并使用prop函数

$('input[name="validationTypesDone"]').on('change', function() {
  if ($(this).prop('checked') && $(this)[0].id === 'validationTypeCertification') {
    $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', true);
    $(this).prop('disabled', false)
  } else {
    $('input[name="validationTypesDone"],input[name="validationTypesDone[]"]').prop('disabled', false);
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
  <div class="panel-body">
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
      <label>Certification</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
      <label>Functional</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>LCM</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>Performance</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>Resilience</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>Security</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 ">
      <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
      <label>System verification</label>
    </div>

jQuery，用于在选择其他复选框时禁用多个复选框

1 个答案: