通用JavaScript来处理单选按钮启用/禁用

generic javascript to handle radio button enable/disable

本文关键字：启用 禁用 单选按钮 处理 JavaScript 通用      更新时间：2023-09-26

我希望仅在选中关联的复选框时启用单选按钮。所以我需要帮助编写一个通用的javascript代码，它将适用于所有复选框。我有大约 100 个复选框，所以我不想在 javascript 代码中手动编写每个 ID 或名称。是否可以提供有关如何以通用方式执行此操作的代码示例。

<form name=registration>
<table border=1>
<tr>
    <td><input type='checkbox' id='c1' name=selcourse value='2-PM-030' onChange="enabledSDF(1,this.value);"> Microsoft Project 2013 </td>
    <td>&nbsp;</td><td><input type=radio id=cd name='2-PM-030' value='Dec 11-12'>Dec 11-12</td>
    <td><input type=radio id=c1d1 name='2-PM-030' value='Jan 26-27'>Jan 26-27</td><td>&nbsp;</td>
    <td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td><input type='checkbox' id='c2' name=selcourse value='2-PM-050'> Microsoft Project 2010 </td>
    <td><input type=radio id=c2d1 name='2-PM-050' value='Nov 24-25'>Nov 24-25</td>
    <td><input type=radio id=c2d2 name='2-PM-050' value='Dec 18-19'>Dec 18-19</td>
    <td><input type=radio id=c2d3 name='2-PM-050' value='Jan 29-30'>Jan 29-30</td>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</form>

我找到了以下代码段，但我不确定如何使其通用。

<script type="text/javascript">
$(window).load(function(){
$(document).ready(function()
function enabledSDF(i,value){
    var form = document.registration;
    if(document.getElementById('course_type').value=='C')
    {
            if (value=="Singaporean"){
                document.getElementById("sdf"+i+"0").disabled='';
                document.getElementById("sdf"+i+"1").disabled='';
            }
            else{
                document.getElementById("sdf"+i+"0").disabled='disabled';
                document.getElementById("sdf"+i+"1").disabled='disabled';
            }
    }
}
$(document).ready(function() 
{
    $("#email_acc").click(function()
    { 
        if ( $(this).is(":checked") ) 
        {  
            $("input[name='radio_email']").removeAttr("disabled");
        }else {
            $("input[name='radio_email']").attr ( "disabled" , true );
        }
    });  
    $("#sys_acc").click(function()
    {
        if ( $(this).is(":checked") )
        {   
            $("input[name='radio_system']").removeAttr("disabled");
        } else {
            $("input[name='radio_system']").attr ( "disabled" , true );
        }
    }); 
});
</script>

尝试以下操作：

$(function() {
  $('input[type="checkbox"]')
    .on('change', checkboxChange) // do it when you change the checkbox
    .each(checkboxChange); // as well as once when the page loads
  function checkboxChange() {
    var $checkbox = $(this);
    $('input[name="' + $checkbox.attr('value') + '"]').prop('disabled', !$checkbox.prop('checked'));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name=registration>
  <table border=1>
    <tr>
      <td>
        <input type='checkbox' id='c1' name=selcourse value='2-PM-030' onChange="enabledSDF(1,this.value);">Microsoft Project 2013</td>
      <td>&nbsp;</td>
      <td>
        <input type=radio id=cd name='2-PM-030' value='Dec 11-12'>Dec 11-12</td>
      <td>
        <input type=radio id=c1d1 name='2-PM-030' value='Jan 26-27'>Jan 26-27</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' id='c2' name=selcourse value='2-PM-050'>Microsoft Project 2010</td>
      <td>
        <input type=radio id=c2d1 name='2-PM-050' value='Nov 24-25'>Nov 24-25</td>
      <td>
        <input type=radio id=c2d2 name='2-PM-050' value='Dec 18-19'>Dec 18-19</td>
      <td>
        <input type=radio id=c2d3 name='2-PM-050' value='Jan 29-30'>Jan 29-30</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

编辑：如果未通过公共属性值链接

如果单选按钮与用于禁用它们的复选框的值同名，则需要从已更改为包含它们的<tr>复选框遍历，然后在其中找到单选按钮。

为此，只需更改我的checkboxChange()函数，如下所示。

function checkboxChange() {
    var $checkbox = $(this);
    $checkbox.closest('tr').find('input[type=radio]').prop('disabled', !$checkbox.prop('checked'));
}

HTML：

  <form name=registration>
<table border=1>
<tr>
    <td><input type='checkbox' class="des" data-year='2013' name=selcourse value='2-PM-030'> Microsoft Project 2013 </td>
    <td>&nbsp;</td><td><input type=radio class="2013" name='2-PM-030' value='Dec 11-12'>Dec 11-12</td>
    <td><input type=radio class="2013" name='2-PM-030' value='Jan 26-27'>Jan 26-27</td><td>&nbsp;</td>
    <td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td><input type='checkbox' class="des" data-year='2010' name=selcourse value='2-PM-050'> Microsoft Project 2010 </td>
    <td><input type=radio class="2010" name='2-PM-050' value='Nov 24-25'>Nov 24-25</td>
    <td><input type=radio class="2010" name='2-PM-050' value='Dec 18-19'>Dec 18-19</td>
    <td><input type=radio class="2010" name='2-PM-050' value='Jan 29-30'>Jan 29-30</td>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</form>

JavaScript：

$('.des').on('change', function () {
  var type = $(this).data('year');
  if(this.checked){
    $('.' + type).attr('disabled', 'true');
  } else {
    $('.' + type).removeAttr( "disabled" );
  }
});

如果你已经在使用jQuery，最好利用它。

相关文章：