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

时间:2016-01-19 11:05:22

标签: javascript php jquery html

我想使用单选按钮在PHP网络应用程序中进行预约。

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

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

并重新运行/响应一个如下所示的数组,其中包含存储在数据库中的单选按钮值,(我希望编译&#34; http://localhost/design-ci/booking/abc&#34;函数/动作不需要这个)

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

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

提前致谢。

3 个答案:

答案 0 :(得分:0)

让我简单解释一下:

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

Reference of disabled

答案 1 :(得分:0)

  

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

直接从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

?>

答案 2 :(得分:0)

如果你想用java脚本这样做一个简单的方法,那就是使用java-script的fetching element属性 添加id =“与名称不同的每个标签的某些不同名称!”你的HTML代码和你的名字=“书” 使用方法:

document.getElementById(“idname”)。disabled = true;

这将禁用与相应id相关联的单选按钮。 所以,无论哪个单选按钮已经预订,你都可以从你的数据库中获取它们,或者只是通过循环迭代来维护日志以禁用单选按钮列表