JavaScript 查询 - 将 AND & OR 与单选框、复选框和文本字段一起使用以启用表单元素

标签 javascript jquery

请参阅JSFiddle代码我已经有了。我的问题是我需要使用单选检查AND 文本输入到文本字段以启用其他单选、复选框和文本字段。到目前为止,我只能使用单选选项 1 OR 单选选项 2 来启用单选按钮、复选框和文本字段。

JSFiddle可能会帮助你们,让你们更好地理解我的意思。

HTML:

 <div class='conlabel'>Have you started trading yet?</div>
  <table width="100">
          <tr>
            <td><label>
              <input type="radio" name="example" value="Yes" id="example_0" required />
              Yes</label></td>
      </tr>
      <tr>
        <td><label>
          <input type="radio" name="example" value="No" id="example_1" required />
          No</label></td>
      </tr>
</table><br>
  <li>
      <div class='conlabel'>If Yes, enter trading name:</div>
      <input type="text" id="field1" name="field1" placeholder="" disabled />
  </li><br>
  <li>
  <div class='conlabel'>If No, then:</div>
      <input type="text" id="field2" name="field2" placeholder="" disabled />
  </li><br>

<li>
      <div class='conlabel'>Enter trading start date (enabled when started trading yet = yes + trading name = notnull:</div>
      <input type="text" id="field3" name="field3" placeholder="" disabled />
 </li><br>

JS:

$(function(){
$("#example_0, #example_1").change(function(){
    $("#field1, #field2").val("").attr("disabled",true);
    if($("#example_0").is(":checked")){
        $("#field1").removeAttr("disabled");
        $("#field1").focus();
    }
    else if($("#example_1").is(":checked")){
        $("#field2").removeAttr("disabled");
        $("#field2").focus();   
    }
});
});

在此示例中,代码当前启用并关注 field1 OR field2,具体取决于它们是 radio-example_0 还是 example_1。我一直无法弄清楚的是,如果他们选择是(示例_0),然后在字段 1 中输入交易名称,那么如何启用字段 3。

希望这比我上次尝试更清楚。感谢您的帮助! (:

最佳答案

您需要在光标离开时检查 field1 的值,试试这个:

  $("#field1").blur(function(){
   if($("#example_0").is(":checked")){
            if($("#field1").val()!==""){
                  $("#field3").removeAttr("disabled");
            }
        }
    });

http://jsfiddle.net/cEaeK/13/

关于JavaScript 查询 - 将 AND & OR 与单选框、复选框和文本字段一起使用以启用表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15544228/

相关文章:

javascript - 如何在鼠标悬停时显示隐藏的 div?

javascript - 大量使用 javascript 后重绘页面

javascript - 阻止具有源的框架访问跨源框架。我拥有这两个网站

javascript - 指令中范围的数组属性在引用时被清空

jquery - 如何制作仅自定义图标的 jQuery UI 按钮小部件?

javascript - 如何在新标签页中打开 2 个网站网址

javascript - jquery -ajax 不检查 Controller 中的 bool 值

javascript - CSS 过渡在 Safari 中有效,但在 Chrome 中无效

javascript - 匹配数组中的对象并合并

jquery - 具有转换内容的图像悬停效果