Question

我正在使用jquery动态创建复选框。我想禁用未经检查的复选框，如片段中所示，但我想仅在其各自的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);

下面的代码段更恰当地解释了问题请帮我。

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

Answer 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>

使用jquery

1 个答案: