Question

它有2个独立的无线电组

当我点击带有class =“hadir0”的单选按钮时，我想启用带有class =“terlambat0”的按钮复选框，当其他单选按钮（class =“sakit0”或“izin0”或“absen0”时，如何再次禁用它） “）被点击了吗？

并在点击“hadir1”时启用复选框“terlambat1”，并在点击“sakit1”或“izin1”或“absen1”时再次禁用？

<table class="table table-bordered table-hover">
<thead>
    <tr>
        <th class="col-sm-1 text-center">No.</th>
        <th class="col-sm-5">Nama</th>
        <th class="col-sm-4">Kehadiran</th>
        <th class="col-sm-2">Keterangan</th>
    </tr>
</thead>
<tbody>
    <tr>
        <fieldset id="kehadiran1">
        <td class="text-center">1</td>
        <td>Doe</td>
        <td>
            <label class="radio-inline"><input class="hadir0" type="radio" value="Hadir" name="kehadiran[0]">Hadir</label>
            <label class="radio-inline"><input class="sakit0" type="radio" value="Sakit" name="kehadiran[0]">Sakit</label>
            <label class="radio-inline"><input class="absen0" type="radio" value="Absen" name="kehadiran[0]">Absen</label>
            <label class="radio-inline"><input class="izin0" type="radio" value="Izin" name="kehadiran[0]">Izin</label>
        </td>
        <td><label class="checkbox-inline"><input class="terlambat0" type="checkbox" value="Terlambat" name="keterangan[0]" disabled="true"> Terlambat</label></td>
        </fieldset>
    </tr>

    <tr>
        <fieldset id="kehadiran2">
        <td class="text-center">2</td>
        <td>Moe</td>
        <td>
            <label class="radio-inline"><input class="hadir1" type="radio" value="Hadir" name="kehadiran[1]">Hadir</label>
            <label class="radio-inline"><input class="sakit1" type="radio" value="Sakit" name="kehadiran[1]">Sakit</label>
            <label class="radio-inline"><input class="absen1" type="radio" value="Absen" name="kehadiran[1]">Absen</label>
            <label class="radio-inline"><input class="izin1" type="radio" value="Izin" name="kehadiran[1]">Izin</label>
        </td>
        <td><label class="checkbox-inline"><input class="terlambat1" type="checkbox" value="Terlambat" name="keterangan[1]" disabled="true"> Terlambat</label></td>
        </fieldset>
    </tr>
</tbody></table><input class="btn btn-link" type="submit" name="submit" id="hadirSemua" value="Hadir Semua">

jquery：当点击id =“hadirSemua”的按钮时，所有带有class =“hadir”的单选按钮都会打开，当然所有带class =“terlambat”的复选框都将启用

$(document).ready(function() 
{
    $("#hadirSemua").attr("data-type", "check");
    $("#hadirSemua").click(function() 
    {
        if ($("#hadirSemua").attr("data-type") === "check") 
        {
            for($i=0; $i<2; $i++)
            {
                $(".terlambat"+$i).prop("disabled", false);
                $(".hadir"+$i).prop("checked", true);
            }
        } 
    })
});

Answer 1

类不必是唯一的，因此我删除了类的数值。

当id =＆＃34; hadirSemua＆＃34;单击，所有单选按钮与class =＆＃34; hadir＆＃34;将开启，当然所有复选框都与class =＆＃34; terlambat＆＃34;将启用

$(document).ready(function() 
{
    $("#hadirSemua").click(function() {
      $(".terlambat").prop("disabled", false);
      $(".hadir").prop("checked", true);
    })
});

我想启用按钮复选框，类=＆＃34; terlambat0＆＃34;当radio =＆＃34; hadir0＆＃34;单击，如果单击其他单选按钮（类=＆＃34; sakit0＆＃34;或＆＃34; izin0＆＃34;或＆＃34; absen0＆＃34;），如何再次禁用？并启用复选框＆＃34; terlambat1＆＃34;当＆＃34; hadir1＆＃34;单击并在＆＃34; sakit1＆＃34;时再次禁用它或＆＃34; izin1＆＃34;或＆＃34; absen1＆＃34;点击了吗？

$(".hadir").change(function() {
  if (this.checked) {
    $(this).closest("tr").find(".terlambat").prop("disabled", false);
  }
})

$(".sakit,.absen,.izin").change(function() {
  if (this.checked) {
    //if other radio is called, I am unchecking the checkbox. you can remove it if you want to.
    $(this).closest("tr").find(".terlambat").prop('checked', false).prop("disabled", true);
  }
})

<强>段

＆＃13;

$("#hadirSemua").click(function() {
  $(".terlambat").prop("disabled", false);
  $(".hadir").prop("checked", true);
})


$(".hadir").change(function() {
  if (this.checked) {
    $(this).closest("tr").find(".terlambat").prop("disabled", false);
  }
})


$(".sakit,.absen,.izin").change(function() {
  if (this.checked) {
    //if other radio is called, I am unchecking the checkbox. you can remove it if you want to.
    $(this).closest("tr").find(".terlambat").prop('checked', false).prop("disabled", true);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th class="col-sm-1 text-center">No.</th>
      <th class="col-sm-5">Nama</th>
      <th class="col-sm-4">Kehadiran</th>
      <th class="col-sm-2">Keterangan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <fieldset id="kehadiran1">
        <td class="text-center">1</td>
        <td>Doe</td>
        <td>
          <label class="radio-inline">
            <input class="hadir" type="radio" value="Hadir" name="kehadiran[0]">Hadir</label>
          <label class="radio-inline">
            <input class="sakit" type="radio" value="Sakit" name="kehadiran[0]">Sakit</label>
          <label class="radio-inline">
            <input class="absen" type="radio" value="Absen" name="kehadiran[0]">Absen</label>
          <label class="radio-inline">
            <input class="izin" type="radio" value="Izin" name="kehadiran[0]">Izin</label>
        </td>
        <td>
          <label class="checkbox-inline">
            <input class="terlambat" type="checkbox" value="Terlambat" name="keterangan[0]" disabled="true"> Terlambat</label>
        </td>
      </fieldset>
    </tr>

    <tr>
      <fieldset id="kehadiran2">
        <td class="text-center">2</td>
        <td>Moe</td>
        <td>
          <label class="radio-inline">
            <input class="hadir" type="radio" value="Hadir" name="kehadiran[1]">Hadir</label>
          <label class="radio-inline">
            <input class="sakit" type="radio" value="Sakit" name="kehadiran[1]">Sakit</label>
          <label class="radio-inline">
            <input class="absen" type="radio" value="Absen" name="kehadiran[1]">Absen</label>
          <label class="radio-inline">
            <input class="izin" type="radio" value="Izin" name="kehadiran[1]">Izin</label>
        </td>
        <td>
          <label class="checkbox-inline">
            <input class="terlambat" type="checkbox" value="Terlambat" name="keterangan[1]" disabled="true"> Terlambat</label>
        </td>
      </fieldset>
    </tr>
  </tbody>
</table>
<input class="btn btn-link" type="submit" name="submit" id="hadirSemua" value="Hadir Semua">

＆＃13;

Answer 2

根据您的实际加价：

您可以在更改单选按钮时触发事件
如果所选择的值为“Hadir”然后激活，则其他值将禁用该复选框。
使用按钮只需触发“Hadir”元素的点击

$('input[type="radio"]').on('change',function(){
  var v = $(this).val(),
      c = $(this).parents('fieldset').find('input[type="checkbox"]');
  c.prop('disabled',v !== "Hadir" )
})
$('#hadirSemua').on('click',function(){
  $('input[value="Hadir"]').click()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<thead>
  <tr>
    <th class="col-sm-1 text-center">No.</th>
    <th class="col-sm-5">Nama</th>
    <th class="col-sm-4">Kehadiran</th>
    <th class="col-sm-2">Keterangan</th>
  </tr>
</thead>
<tbody>
  <tr>
    <fieldset id="kehadiran1">
      <td class="text-center">1</td>
      <td>Doe</td>
      <td>
        <label class="radio-inline">
          <input class="hadir0" type="radio" value="Hadir" name="kehadiran[0]">Hadir</label>
        <label class="radio-inline">
          <input class="sakit0" type="radio" value="Sakit" name="kehadiran[0]">Sakit</label>
        <label class="radio-inline">
          <input class="absen0" type="radio" value="Absen" name="kehadiran[0]">Absen</label>
        <label class="radio-inline">
          <input class="izin0" type="radio" value="Izin" name="kehadiran[0]">Izin</label>
      </td>
      <td>
        <label class="checkbox-inline">
          <input class="terlambat0" type="checkbox" value="Terlambat" name="keterangan[0]" disabled="true">Terlambat</label>
      </td>
    </fieldset>
  </tr>

  <tr>
    <fieldset id="kehadiran2">
      <td class="text-center">2</td>
      <td>Moe</td>
      <td>
        <label class="radio-inline">
          <input class="hadir1" type="radio" value="Hadir" name="kehadiran[1]">Hadir</label>
        <label class="radio-inline">
          <input class="sakit1" type="radio" value="Sakit" name="kehadiran[1]">Sakit</label>
        <label class="radio-inline">
          <input class="absen1" type="radio" value="Absen" name="kehadiran[1]">Absen</label>
        <label class="radio-inline">
          <input class="izin1" type="radio" value="Izin" name="kehadiran[1]">Izin</label>
      </td>
      <td>
        <label class="checkbox-inline">
          <input class="terlambat1" type="checkbox" value="Terlambat" name="keterangan[1]" disabled="true">Terlambat</label>
      </td>
    </fieldset>
  </tr>
</tbody>
</table>
<input class="btn btn-link" type="submit" name="submit" id="hadirSemua" value="Hadir Semua">

如何在1表单jquery上禁用/启用多个复选框

2 个答案: