Question

我正在编写一个小脚本，如果勾选了某个单选按钮，或者如果输入字段中包含禁用单选按钮的字符，则会禁用表单字段

所以我想让我的代码做的是当用户输入文本字段并添加至少一个任何类型的字符来禁用单选按钮时，如果该字段被清除以重新启用单选按钮

出于某种原因，当我做其中任何一项或者，我的＆＃34;已启用＆＃34;警报一直显示，单选按钮未被禁用

要获取弹出警报，需要在输入字段外单击，如果可能，我希望这是一个鼠标输出，但我可以稍后再处理

如果直接在表单中输入值，则会禁用单选按钮，但在清除字段后我无法启用它们

步骤：如果值未在表单中设置，请在文本字段中输入文本。单选按钮保持禁用状态

在表单中输入值，文本字段清除时文本按钮保持禁用状态

工作部件：如果收音机btn＆＃34;是＆＃34;勾选显示＆＃34; test＆＃34;字符串和禁用文本字段如果是电台btn＆＃34; No＆＃34;勾选然后启用文本字段

正在使用的jQuery版本：1.9

下面是我的JavaScript，下面是HTML

脚本：

$(function() {

    var tlHeader = 'Test';

    var f2 = $('#field_2').val();

    // This function controls inpput box toggling on/off radio buttons
    $( '#field_2' ).change(function() {
        if(f2.length != 0) {
            alert( "Disabled" )
            $("input[name=toggle]").prop('disabled', true)
        } else if(f2.length == 0) {
            alert( "Enabled" ) 
            $("input[name=toggle]").removeProp('disabled')
        };
    }); 

   window.invalidate_input = function() {
      // This function controls radio btn actions
        if ($('input[name=toggle]:checked').val() == "Yes") {
            $('#field_2').attr('disabled', 'disabled'),
            $('#thgtLdr').html( tlHeader );
            $('#thgtLdr').not("No").show();

        } else if ($('input[name=toggle]:checked').val() == "No") {
            $('#field_2').removeAttr('disabled'),
            $('#thgtLdr').not("Yes").hide();
        }
   };


    $("input[name=toggle]").change(invalidate_input);

    invalidate_input();
});
</script>

HTML：

      <body>

<div id=rdTest>
    <div class="inputField">
        <label>Focal Image:</label>
        <input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
    </div> <!-- End input field -->


  <div class="radioGroup">
    <label>Test Page:</label>
        <input type='radio' name='toggle' value='Yes' id="tglyes"/>Yes
        <input type='radio' name='toggle' value='No' id="tglno"/>No
  </div> 

<div id="thgtLdr">

</div>

</div>  



</body>

Answer 1

您的用例并不完全清楚，但我会向您展示如何实现基本目标。

首先，我会避免鼠标事件，并使用keyup与计时器，以便我的功能只在用户停止输入时调用，而不是在每个键入的字母后。然后，它只是检查文本并执行启用或禁用元素的主要内容。这是一个例子：

＆＃13;

    var keyupDelay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();
    
    $('#field_2').keyup(function() {
        var $this=$(this);
        keyupDelay(function(){
            var val=$this.val();
            console.log(val);
            if(val=='') $('#tglyes, #tglno').prop('disabled',true);
            else $('#tglyes, #tglno').prop('disabled',false);
        }, 400 ); // triggered after user stops typing for .4 seconds, adjust value as needed
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=rdTest>
    <div class="inputField">
      <label>Focal Image:</label>
      <input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
    </div>
    <!-- End input field -->
    <div class="radioGroup">
      <label>Test Page:</label>
      <input type='radio' name='toggle' value='Yes' id="tglyes" disabled="true"/>Yes
      <input type='radio' name='toggle' value='No' id="tglno"  disabled="true"/>No
    </div>

    <div id="thgtLdr">
    </div>
  </div>

＆＃13;

Answer 2

您可以通过多种方式简化代码。

每次用户在文本字段上释放密钥时，都会触发int eventType = parser.getEventType(); while (eventType != XmlPullParser.END_DOCUMENT) { String tagname = parser.getName(); switch (eventType) { case XmlPullParser.START_TAG: if (tagname.equalsIgnoreCase("Line")) { line = new Lines(); } break; case XmlPullParser.TEXT: text = parser.getText(); break; case XmlPullParser.END_TAG: if (tagname.equalsIgnoreCase("Line")) { lines.add(line); lines.setLine(text); } break; default: break; } eventType = parser.next(); } } catch (XmlPullParserException e) {e.printStackTrace();} catch (IOException e) { e.printStackTrace(); } catch (NullPointerException e){ e.printStackTrace(); } return lines; }事件。在回调中，您可以使用keyup获取文本字段的值。根据经验，最好在切换某些与输入相关的属性时使用.prop()方法，例如this.value和disabled。您可以使用布尔值enable/disable这些属性。

＆＃13;

checked

＆＃13;

// cache the elements to avoid having retrieve the same elements many times
var $textbox = $('#field_2'), 
    $radios = $('input[name=toggle]'), 
    $div = $('#thgtLdr');

// everytime user presses a key...
$textbox.on('keyup', function() {
    // check if a value was entered or not
    // if so, disabled the radio buttons; otherwise enable the radio buttons
    $radios.prop('disabled', this.value);
});

// when radio buttons change...
$radios.on('change', function () {
    // check if value is Yes or No
    if (this.value === 'Yes') {
        $textbox.prop('disabled', true);
        $div.text(this.value);
    } else {
        $textbox.prop('disabled', false);
        $div.empty();             
    }
});

＆＃13;

此外，养成caching your jQuery objects的习惯。

Answer 3

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on('click','.choice',function(){
    if($(this).val() == 'yes')
    {
       $('.textfield').prop('disabled',true);
       $('#string').html('Test Welcome');
    }
    else
    {
       $('.textfield').prop('disabled',false);
       $('#string').html('');
    }
});
$(document).on('keyup','.textfield',function(){
    if($(this).val().length > 0)
    {
       $('.choice').each(function()
       {
          if($(this).is(':checked'))
          {
             $(this).attr('checked',false);  
          }
          $(this).prop('disabled',true);
       });
    }
    else
    {
       $('.choice').prop('disabled',false);
    }
});
});
</script>
<body>
<form>
    <input type="text" class="textfield" placeholder="enter text"/>
    Yes<input type="radio" name="choice" class="choice" value="yes" />
    No<input type="radio" name="choice" class="choice" value="no" />
    <p id="string" ></p>
</form>
</body>

用于在文本字段被清除或字符存在时启用/禁用单选按钮的Javascript

3 个答案: