单选与文本框的动态绑定

来源：互联网发布：珠海知想科技官网编辑：程序博客网时间：2024/05/16 06:29
要求：点击包月按钮时,只有基本费用文本框能输入且内容清空,其余文本框清空,且处于不能输入状态,其余两个按钮相同功能
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用于测试</title><style type="text/css">  .color{    background-color:#f6f6f6;  }  .width100{    width:100px;  }</style><script type="text/javascript" src="../jquery-1.11.1.js"></script><script type="text/javascript">//要求:点击时文本框都要清空//jQuery function feeTypeChange(type){var $inputs = $("input:text");if(type == 1){$inputs.eq(0).attr("readOnly",true).addClass("color").val("");$inputs.eq(1).attr("readOnly",false).removeClass("color").val("");$inputs.eq(2).attr("readOnly",true).addClass("color").val("");}else if(type == 2){$inputs.eq(0).attr("readOnly",false).removeClass("color").val("");$inputs.eq(1).attr("readOnly",false).removeClass("color").val("");$inputs.eq(2).attr("readOnly",false).removeClass("color").val("");}else{$inputs.eq(0).attr("readOnly",true).addClass("color").val("");$inputs.eq(1).attr("readOnly",true).addClass("color").val("");$inputs.eq(2).attr("readOnly",false).removeClass("color").val("");}} //JavaScript   /*   function feeTypeChange(type){  var inputs = document.getElementsByTagName("input");  if(type == 1){//包月  只有基本费用  inputs[3].value="";//清空  inputs[3].readOnly = true;//添加只读属性  /*  inputs[3].setAttribute("class","color");      此处不能将class的名字改为color,虽然有了color的属性但是之前的width100属性就没有了,要用如下方法解决      给class属性添加一个值,让其变为两个属性    .width100{}和.color{}样式都会有效果(注意空格)      相当于class="width100 color"  *//*  inputs[3].className += " color";  inputs[4].readOnly = false;  inputs[4].className = "width100";  inputs[4].value = "";    inputs[5].readOnly = true;  inputs[5].className += " color";  inputs[5].value = "";  }else if(type == 2){  inputs[3].readOnly = false;  inputs[3].className = "width100";  inputs[3].value = "";  inputs[4].readOnly = false;  inputs[4].className = "width100";  inputs[4].value = "";  inputs[5].readOnly = false;  inputs[5].className = "width100";  inputs[5].value = "";  }else{  inputs[3].readOnly = true;  inputs[3].className += " color";  inputs[3].value = "";  inputs[4].readOnly = true;  inputs[4].className += " color";  inputs[4].value = "";  inputs[5].readOnly = false;  inputs[5].className = "width100";  inputs[5].value = "";  }  } */</script></head><body><input type="radio" name="costType" value="1" onclick="feeTypeChange(1)"/>包月:<input type="radio" name="costType" value="2" checked onclick="feeTypeChange(2)"/>套餐:<input type="radio" name="costType" value="3" onclick="feeTypeChange(3)"/>计时:<br><p>基本时长:<input class="width100" type="text" /></p><p>基本费用:<input class="width100" type="text" /></p><p>单位费用:<input class="width100" type="text" /></p><p>包月-2   套餐-1-2-3   计时-3</p></body></html>
0 0