禁用文本字段并设置隐藏字段的值

时间:2014-04-28 19:38:45

标签: jquery

我有一个函数,我想设置隐藏文本字段的值,然后禁用其余的。例如,如果我在第一组数字(1-4)上单击说1,我希望禁用其余数字1。并且每个集合都有自己的隐藏字段,因此当我点击该集合上的任何数字时,它将获得该数字并存储它。这是我的代码,但我不能让它工作。我将不胜感激任何帮助。我将不胜感激任何关于如何获得这种效果的建议。谢谢。在这个小提琴中,我更新了这个功能,我只是不知道如何实现启用/禁用输入的效果。 http://jsfiddle.net/ph67U/3/

$(document).ready(function() {
for (x=1; x <= 4; x++){
$('.inputRadius' + x).mouseover(function() {
  $(this).addClass('shadow');
});

$('.inputRadius' + x).mouseout(function() {
  if (!$(this).data("sticky")){
    $(this).removeClass('shadow');
  }
});

$('.inputRadius' + x).click(function() {
  $('.inputRadius' + x).data("sticky", false);
  $('.inputRadius' + x).removeClass('shadow');
  $(this).data("sticky", true);
  $(this).addClass('shadow');

      $("#input" + x + x ).attr("disabled",false);
      $("#input" + x + $(this).val()).attr("disabled",true);

  $('#hidvalue' + x).val($(this).val())
});

}

});

这是html部分

    <form action="" method="post" name="form1"><strong>Poll?</strong>
    <div style="font-size: 11px;"> Rank From 1 (most excited) to 4.</div>
    <ul class="clearfix">
    <li><label>Option 1</label>
    <div class="numberContainer"><input class="inputRadius1" id="input11" type="text" readonly value="1" /><input id="input12" class="inputRadius1" type="text" readonly value="2" /><input id="input13" class="inputRadius1" type="text" readonly value="3" /><input id="input14" class="inputRadius1 lastInput" type="text" readonly value="4" /><input id="hidvalue1" type="text" name="hidvalue1" value="1" /></div></li>
    <li><label>Option 2</label>
    <div class="numberContainer"><input class="inputRadius2" id="input21" type="text" readonly value="1" /><input id="input22" class="inputRadius2" type="text" readonly value="2" /><input id="input23" class="inputRadius2" type="text" readonly value="3" /><input id="input24" class="inputRadius2 lastInput" type="text" readonly value="4" /><input id="hidvalue2" type="text" name="hidvalue2" value="1" /></div></li>
    <li><label>Option 3</label>
    <div class="numberContainer"><input class="inputRadius3" type="text" id="input31" readonly value="1" /><input id="input32" class="inputRadius3" type="text" readonly value="2" /><input id="input33" class="inputRadius3" type="text" readonly value="3" /><input id="input34" class="inputRadius3 lastInput" type="text" readonly value="4" /><input id="hidvalue3" type="text" name="hidvalue3" value="1" /></div></li>
    <li><label>Option 4</label>
    <div class="numberContainer"><input class="inputRadius4" id="input41" type="text" readonly value="1" /><input id="input42" class="inputRadius4" type="text" readonly value="2" /><input id="input43" class="inputRadius4" type="text" readonly value="3" /><input id="input44" class="inputRadius4 lastInput" type="text" readonly value="4" /><input id="hidvalue4" type="text" name="hidvalue4" value="1" /></div></li></ul>
    <div class="clearfix paddingTop30"></div>
    <p><input id="button" type="submit" name="button" value="Submit" class="button" /</p>
    </form>

1 个答案:

答案 0 :(得分:0)

也许,您只需要使用jquery来启用或禁用/显示或隐藏您的内容。当用户单击时,您只需隐藏。 你可以试试这样的东西

$(li).click(function(){
     localStorage.setItem('myItem',$(this).value)
     $(this).toggle();
});

希望这个帮助;)