Question

我有这样的表格，打开HTML文件后，它将读取JSON VALUES并将其显示给表单。我需要检查文本框是否与两个选项相同＆＃34; Jollibee＆＃34;和＆＃34;麦多＆＃34;。

如果它是相同的，它将自动检查与文本框具有相同值的两个选项中的任何一个，同时它将禁用文本框，否则它将选择＆＃34;其他＆＃34;而且价值也是一样的。顺便说一句，我从JSON获得了我的价值观。

enter image description here

这是我在JSFIDDLE中的代码，但我不能让它在js小提琴中工作但是使用notepad ++它工作得很好..随意编辑这个非常感谢....

HTML

<div>Name: <input type="text" id="name" value=""> </div></br>
    <div>Age: <select id="age"></select></div></br></br>

    <p>Favorite fastfood</p>
    <input type="radio" name="fastfood" value="Jollibee">Jollibee<br>
    <input type="radio" name="fastfood" value="Mcdo">McDo<br>
    <input type="radio" name="fastfood" value="Other">Other <input type="text" id="otherfastfood" value=""> </div></br></br>

    <p>Favorite ice cream flavor</p>
    <select id="favorite_flavor"></select></br></br></br>

    <p>House(s)</p>
    <div id="theHouses">
        <div>1. <select id="house-1">
                    <option>Quezon City</option>
                    <option>Makati City</option>
                    <option>Manila City</option>
                    <option>Paranaque City</option>
                </select></div></br>
        <div>2. <select id="house-2">
                    <option>Quezon City</option>
                    <option>Makati City</option>
                    <option>Manila City</option>
                    <option>Paranaque City</option>
                </select></div></br>
    </div>
    <button id="hBtn" class="btn btn-danger">Add</button>   
    <button id="myBtn" class="btn btn-danger">Submit</button></br>

JQUERY

$(document).ready(function()
{
   $('#name').val(info['name']);
   $("#age").html(theAge);
   $("#age").val(info['age']);
   $('#otherfastfood').val(info['fastfood']);
   $('input[name="fastfood"][value="Other"]').prop("checked",true);
   $("#favorite_flavor").html(theFlavor);
   $("#favorite_flavor").val(info['flavor']);
   $("#house-1").val(info['houses'][0]);
   $("#house-2").val(info['houses'][1]);

   $('input[type=radio]').change(function()
   {
     if ($(this).is(':checked')) 
     { 
        if(info['fastfood'])
        {
            $('input[id=otherfastfood]').attr('disabled', 'disabled');
            $(this).next().removeAttr('disabled');
            $('#otherfastfood').val("");
        }
    }
});

$('#hBtn').click(function()
{
    Houses();
});

$("#myBtn").click(function()
{
    var series = {};
    var h = [];
    var counter = $("[id^=house]").length;
    series.name = $('#name').val();
    series.age = [parseInt($('#age').val())];

    if ($('input[value=Jollibee]').is(':checked')) 
        series.fastfood = $('input[value=Jollibee]').val();

    if ($('input[value=Mcdo]').is(':checked')) 
        series.fastfood = $('input[value=Mcdo]').val();

    if ($('input[value=Other]').is(':checked')) 
        series.fastfood = $('#otherfastfood').val();

    series.flavor = $('#favorite_flavor').val();

    for (var i = 1; i <= counter; i++) 
    {
        h.push($('#house-' + i).val());
    }
    series.houses = h;
    alert(JSON.stringify(series));
    });
});

var info = JSON.parse('{"name":"Juan dela Cruz", "age":29, "fastfood":"Jollibee", "houses": ["Manila City", "Paranaque City"], "flavor":"mango", "set_flavors":["ube","matcha","chocolate","mocha","mango"]}');
var counter = 3;
var str = '';

function Houses() 
{
  str = '<div>'+counter+'. <select id="house-'+counter+'"><option>Quezon City</option><option>Makati City</option><option>Manila City</option><option>Paranaque City</option></select></div></br>';
  $('#theHouses').append(str);
  counter++;
}

function theAge()
{
  var agesRange = "";

  for(var a = 1; a <= 100; a++)
  {
    agesRange += '<option>'+a+'</option>';
  }

  return agesRange;
 } 

function theFlavor()
{
   var flavors = "";
   var counter = info['set_flavors'].length;

   for(var a = 0; a < counter; a++)
   {
     flavors += '<option>'+info['set_flavors'][a]+'</option>';
   }

   return flavors;
}

Answer 1

$('input[value=Other]').click(function(){
    if($(this).prop('checked')){
        $('#otherfastfood').prop('disabled',false)
    }
});

$('#otherfastfood').on('change',function(){
    $('input[name=fastfood]').each(function(custom){
       if($(this).val()!='Other' && $(this).val().toLowerCase()==$('#otherfastfood').val().toLowerCase()){
            $(this).prop("checked",true);   
            $('#otherfastfood').val('');
            $('#otherfastfood').prop('disabled',true)
        }
    });
});

working fiddle

Answer 2

检查JSFiddle： - JSFiddle

检查文字＆＃34; Jollibee＆＃34;在文本框中。

 $(".nameStr").on('change', function() {
    if($(this).val() == "Jollibee"){
        $('.Jollibee').prop('checked', true);
    }
});

编辑：如何检查JSON的值并将其与单选按钮的值进行比较，以便可以选择它

2 个答案: