JavaScript查询-使用AND &OR使用无线电、复选框和文本字段来启用表单元素

JavaScript Query - Using AND & OR with Radios, Checkboxes and Text Fields to enable form elements

本文关键字:文本 复选框 字段 元素 表单 启用 无线电 使用 查询 AND OR      更新时间:2023-09-26

请参阅我已经拥有的JSFiddle代码。我的问题是,我需要使用单选检查文本输入到文本字段中,以启用其他单选、复选框和文本字段。到目前为止,我只使用单选选项1 单选选项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 field2,这取决于它们是划分radio-example_0还是example_1。我无法弄清楚的是,如果他们选择Yes (example_0),然后在field1中输入一个交易名称,那么如何启用field3。

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

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

  $("#field1").blur(function(){
   if($("#example_0").is(":checked")){
            if($("#field1").val()!==""){
                  $("#field3").removeAttr("disabled");
            }
        }
    });
http://jsfiddle.net/cEaeK/13/

$(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();   
             $("#field3").val('');
                              $("#field3").attr("disabled",true);
        }
    });
        $('#field1').focusout(function(){
            if($('#field1').val().length!=0)
                  $("#field3").removeAttr("disabled");
            else
            { $("#field3").val('');
                              $("#field3").attr("disabled",true);
            }
    });
});
if(($("#example0").is(":checked") && $("#field0").val().length != 0) || ($("#example1").is(":checked") && $("#field1").val().length != 0)) {
    PASS!
}