在文本字段值上启用单选按钮

Enabling radio button on textfield value

本文关键字：启用 单选按钮 文本 字段      更新时间：2023-09-26

如果该值为"Runner"，则单选按钮启用，否则单选按钮禁用。下面的代码总是禁用按钮，我不知道为什么。

var role = $("#txtRole").val(empdata.EMPROLE.toString().toUpperCase());
if(role != 'Runner' || role != 'RUNNER') {
    $("input[type=radio]").attr('disabled', true);
} else if(role == 'Runner' || role == 'RUNNER') {
    $("input[type=radio]").attr('disabled',false);
}

这看起来有点令人困惑，因为它设置了值。我不知道设置后是否也会出现

var role = $("#txtRole").val(empdata.EMPROLE.toString().toUpperCase());

您需要在设置后获取值:

// setter
$("#txtRole").val(empdata.EMPROLE.toString().toUpperCase());
// getter
var role = $("#txtRole").val().toUpperCase();

然后可以设置或删除禁用属性

if( role != 'RUNNER' )
    $("input[type=radio]").attr('disabled', 'disabled');
else
    $("input[type=radio]").removeAttr('disabled');

我建议使用change事件来检查字段是否对用户编辑开放。

$("#txtRole").on("change", function(){
    var role = $("#txtRole").val().toUpperCase();
    if( role != 'RUNNER' )
        $("input[type=radio]").attr('disabled', 'disabled');
    else 
        $("input[type=radio]").removeAttr('disabled');
});

，当变化发生时:

$("#txtRole").val(empdata.EMPROLE.toString().toUpperCase());
$("#txtRole").trigger('change'); //just to be sure

会自动检查和修改

(忽略您的条件，)您应该使用removeAttr('disabled')而不是attr('disabled', false)。

同时，你的条件应该是:

if (role !== 'RUNNER') {
    $(...). attr('disabled', true);
}
else {
    $(...). removeAttr('disabled');
}

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function()
    {
    $("#txtRole").val('Runner');
    $("#txtRole").change(function()
     {
      var role = $("#txtRole").val().toUpperCase();
      if(role != 'RUNNER') 
        {
        $("input[type=radio]").prop('disabled', true);
        } 
     else if(role == 'Runner' || role == 'RUNNER') 
        {
        $("input[type=radio]").prop('disabled',false);
        }
    });
    });
    </script>
    </head>
    <body>
<input type='text' id='txtRole' />
<input type='radio'/>
        </body>

    </body>
    </html>
相关文章：