使用 jquery 禁用选定 div 元素中未选中的复选框答案

【问题标题】：Disable unchecked check boxes in selected div element using jquery使用 jquery 禁用选定 div 元素中未选中的复选框
【发布时间】：2018-06-03 01:19:21
【问题描述】：

我正在使用 jquery 动态创建复选框。我想禁用未选中的复选框，如 sn-p 所示，但我只想禁用它们各自的 div 元素中的复选框，而不是其他 div 元素中的复选框，这是现在导致问题的原因。

我已经编写了代码来根据它们各自的 div 标签禁用/启用复选框，并且我已经对其进行了评论，因为如果启用它会引发错误。

$($(".checkbox").eq(id).":checkbox[name='radio']:not(:checked)").prop('disabled', true);

问题说明：这里我动态创建了两个 div 标签，其中的复选框也使用相同的名称创建。因此，如果我选中第一个 div 中的复选框，则其他复选框将被禁用，并且会创建其他 div 标签，它按预期工作。但是如果我检查第二个 div 标签中的任何选项，第二个 div 标签中的其他选项不会被禁用，并且如果我取消选中第一个 div 标签中的选中选项，两个选项都会在第一个 div 标签中被禁用。我猜这是因为所有复选框都有相同的名称。

我们怎样才能只在它们各自的 div 标签中禁用复选框。我尝试了下面的代码，但没有工作

$($(".checkbox").eq(1).":checkbox[name='radio']:not(:checked)").prop('disabled', true);

下面的sn -p 更恰当地解释了这个问题请帮我。

function checkdiv(id, val) {
  if ($(":checkbox[name='radio']:checked").length == 1)
    $(":checkbox[name='radio']:not(:checked)").prop('disabled', true);
  else
    $(":checkbox[name='radio']:not(:checked)").prop('disabled', false);

  var diva = Number(id) + 1;
  var divb = Number(id) + 1;
  //if(id.length != 0){
  if (val.checked == true) {
    if (diva < 2 && divb < 2) {
      creatediv('maindiv')
    }
  }
  //	}
  else {
    var diva = Number(id) + 1;
    var divb = Number(id) + 1;

    $("#" + diva).remove();
    $(".divot").eq(divb).remove();

  }
}

function creatediv(main) {
  var divid = $(".divin").length;
  var divid1 = $(".divot").length;


  var div = "<div class='col-xs-2 divin' id='" + divid + "' style='border:1px solid'><span class='header'></span></div><div class='col-xs-1 divot'></div>";

  $('#' + main).append(div);



  loadval(divid)

}

function loadval(div) {

  var div1 = "<div class='checkbox'><label><input type='checkbox' name='radio' value='Head' onchange='checkdiv(" + div + ",this)'>Head</label><br><label><input type='checkbox' name='radio' value='Hand' onchange='checkdiv(" + div + ",this)'>Hand</label></div>";
  $("#" + div).append(div1)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body onload="creatediv('maindiv')">
  <div class="container">
    <div class="form-group row" id="maindiv">

    </div>
  </div>
</body>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您是否在 jQuery API 中尝试过“.find” - 这只会在指定的选择器中查找元素 - 请参阅对“checkdiv”函数的修改（$('#' + id) )

function checkdiv(id, val) {

  if ($('#' + id).find(":checkbox[name='radio']:checked").length == 1)
    $('#' + id).find(":checkbox[name='radio']:not(:checked)").prop('disabled', true);
  else
    $('#' + id).find(":checkbox[name='radio']:not(:checked)").prop('disabled', false);

  var diva = Number(id) + 1;
  var divb = Number(id) + 1;
  //if(id.length != 0){
  if (val.checked == true) {
    if (diva < 2 && divb < 2) {
      creatediv('maindiv')
    }
  }
  //	}
  else {
    var diva = Number(id) + 1;
    var divb = Number(id) + 1;

    $("#" + diva).remove();
    $(".divot").eq(divb).remove();

  }
}

function creatediv(main) {
  var divid = $(".divin").length;
  var divid1 = $(".divot").length;


  var div = "<div class='col-xs-2 divin' id='" + divid + "' style='border:1px solid'><span class='header'></span></div><div class='col-xs-1 divot'></div>";

  $('#' + main).append(div);



  loadval(divid)

}

function loadval(div) {

  var div1 = "<div class='checkbox'><label><input type='checkbox' name='radio' value='Head' onchange='checkdiv(" + div + ",this)'>Head</label><br><label><input type='checkbox' name='radio' value='Hand' onchange='checkdiv(" + div + ",this)'>Hand</label></div>";
  $("#" + div).append(div1)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body onload="creatediv('maindiv')">
  <div class="container">
    <div class="form-group row" id="maindiv">

    </div>
  </div>
</body>

【讨论】：