Javascript:通过选择值禁用单选按钮

Javascript: Disable Radio buttons by selecting value

本文关键字:单选按钮 选择 Javascript      更新时间:2023-09-26

我想在 PHP Web 应用程序中使用单选按钮进行约会。

我有一个单选按钮列表如下,用户可以选择此单选按钮中的任何一个,其值存储在数据库中是约会日期和时间的一半。

<tr>
 <td>
     <label><input type="radio" name="book" value="1" required>11.00 AM</label>
 </td>
 <td>
    <label><input type="radio" name="book" value="2" required>11.10 AM</label>
 </td>
 <td>
     <label><input type="radio" name="book" value="3" required>11.20 AM</label>
 </td>
 <td>
     <label><input type="radio" name="book" value="4" required>11.30 AM</label>
 </td>
 <td>
     <label><input type="radio" name="book" value="5" required>11.40 AM</label>
 </td>
 <td>
    <label><input type="radio" name="book" value="6" required>11.50 AM</label>
 </td>
 <td>
      <label><input type="radio" name="book" value="7" required>12.00 PM</label>
 </td>
</tr>

我还想禁用已经选择并存储在数据库中的单选按钮。

因此,在页面加载时,我使用 AJAX 获取以前存储的单选按钮值,如下所示,

$( document ).ready(function() {
    $.ajax({
        type        : 'POST',
        url         : 'http://localhost/design-ci/booking/abc',
        dataType    : 'json',
        encode      : true
    });
});

并且这会重新运行/响应如下所示的数组,其中包含存储在数据库中的单选按钮值,(我希望不需要"http://localhost/design-ci/booking/abc"函数/操作的编码)

[{"value":"1"},{"value":"4"},{"value":"6"}]

我的问题是如何禁用数组中包含的单选按钮。数组中的值是以前用户选择并存储在数据库中的值,当前用户无法选择它们,因为它们已经预订。

提前谢谢。

让我简单地解释一下:

1) 从数据库中获取现有值。在您的案例 1、4、6 中。

2) 创建一个时隙数组,如下所述。

3) 遍历数组并打印复选框。

4)如果现有值中存在值,则添加disabled属性,否则,不添加任何内容。

<?php
$existingValues = array(1, 4, 6);
$timeSlots = array();
$timeSlots[1] = '11.00 AM';
$timeSlots[2] = '11.10 AM';
$timeSlots[3] = '11.20 AM';
$timeSlots[4] = '11.30 AM';
$timeSlots[5] = '11.40 AM';
$timeSlots[6] = '11.50 AM';
$timeSlots[7] = '12.00 AM';
if (! empty($timeSlots)) {
?>
<tr>
<?php
  foreach ($timeSlots as $val => $display) {
    $disabled = in_array($val, $existingValues) ? 'disabled' : '';
?>
<td><label><input type="radio" name="book" value="<?php echo $val;?>" required <?php echo $disabled;?>><?php echo $display;?></label></td>
<?php
  }
?>
</tr>
<?php
}
?>

残疾人参考

我还想禁用已经选择并存储在数据库中的单选按钮。

直接从PHP执行此操作,也许在单独的文件中,然后包含在该文件中?像这样的东西,伪代码..

<?php
$age = array("1"=>"0", "2"=>"1", "3"=>"0");
for loop  with array length
 if(key value==0)
  print radio button with checkbox enabled
 else
  print radio button with checkbox disabled
?>

如果你想使用java-script来做到这一点,一个简单的方法是使用java-script的fetching element属性将 id="每个标签的一些不同名称与名称不同!"添加到您的 HTML 代码中,以及您的 name="book"用:

document.getElementById("idname").disabled = true;

这将禁用与相应 ID 关联的单选按钮。因此,无论已经预订了哪个单选按钮,您都可以从数据库中获取它们或维护日志以禁用单选按钮列表,只需循环迭代它们即可