更改公司文本字段的颜色

时间:2016-03-08 06:43:43

标签: jquery html css

用户表

user_ID       user_type       user_company
   1              I                

user_type:
我 - 内部
电子 - 外部

updateuser.php

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    //---CLICK USER TYPE RADIO BUTTON---
    $(".usertype").click(function() 
    {
        if($(this).val() === 'I')
        {
            $("#usercompanyname").val('');
            $("#usercompanyname").attr('disabled', true);
            $("#usercompanyname").css("background-color", "gray");
        }
        else 
        {
            $("#usercompanyname").attr('disabled', false);
            $("#usercompanyname").css("background-color", "skyblue");
        }
    });   
});
</script>
<style>
.staffcompanyfieldcellinput {
background-color: skyblue; 
color: blue;
}

.staffcompanydisablefieldcellinput {
background-color: gray; 
color: blue; 
}
</style>
</head>

<body>
<form method="post" action="user.php">
  <table>
  <?php
  //---DB Connect---
  $query = "SELECT *
            FROM user 
            WHERE user_ID = 1"; 
  $result = mysqli_query($dbc, $query);
  $row = mysqli_fetch_array($result);
  ?>
  <tr>
    <td> Type : <span class="style2">*</span></td>
    <td>
      <input type="radio" name="usertype" class="usertype" value="I"
      <?php if($row['user_type'] == 'I') echo 'checked'; ?> />Internal
      <input type="radio" name="usertype" class="usertype" value="E" 
      <?php if($row['user_type'] == 'E') echo 'checked'; ?> />External
    </td>
  </tr>
  <tr>
    <td>Company Name : </td>
    <td>
      <input type="text" name="usercompanyname" id="usercompanyname"   value="<?php echo $row['user_company']; ?>" 
      maxlength="120" size="40" <?php echo ($row['user_type'] == 'I') ? 'class="usercompanydisablefieldcellinput" disabled' : 
      'class="usercompanyfieldcellinput"'; ?> />
    </td>
  </tr>
  <tr>
    <td><input type="submit" name="submit" value="Update User"></td>
    <td><input type="reset" name="reset" value="Reset"></td>
  </tr>
</table>
</form>
</body>
</html>

我的情况是这样的:
- 如果用户选择“内部”,则公司文本字段将以灰色禁用 - 如果用户选择“外部”,则将使用天蓝色启用公司文本字段。

从上面的代码中,我将获得灰色的禁用公司文本字段。
现在我想改变外部。当我更改为外部时,公司文本字段将启用天蓝色并让我填写。

我唯一的问题是当我单击重置按钮时,用户类型单选按钮将更改为内部,但公司文本字段颜色仍然是天蓝色而不是灰色,文本字段也没有禁用。

如何修改它?有人能帮助我吗?

0 个答案:

没有答案