Aquí estoy haciendo editar formulario. Tengo dos matrices. En una matriz (allAmenities) tengo todos los nombres de servicios; La segunda matriz (particularPropertyAmenity) tiene solo dos nombres de servicios.

Quiero marcar esta casilla de verificación de nombres de servicios. ¿Cómo puedo hacer esto?

var htmlString = '';
$(document).ready(function() {
  var allAmenities = {
    "status": "success",
    "count": 3,
    "data": [{
        "amenityId": "1",
        "propertylistId": "1",
        "amenityName": "Lift",

      }, {

        "amenityId": "2",
        "propertylistId": "1",
        "amenityName": "Gym",
      }, {

        "amenityId": "3",
        "propertylistId": "1",
        "amenityName": "Swimming Pool",
      }, {

        "amenityId": "4",
        "propertylistId": "1",
        "amenityName": "Power backup",
      }, {

        "amenityId": "5",
        "propertylistId": "1",
        "amenityName": "Security",
      },

    ]
  };



  var particularPropertyAmenity = [{
    "amenityName": "Lift",
    "amenityStatus": "Active"
  }, {
    "amenityName": "Security",
    "amenityStatus": "Active"
  }]

  htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';

  $.each(allAmenities['data'], function(key, value) {

    htmlString += 'Amenities:  <input type="checkbox" name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '"> ' + value.amenityName + '';
  });
  $('#linz').append(htmlString);

  htmlString += '</form>';

  $('.rentEdit').empty().append(htmlString);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="rentEdit"></div>

Salida esperada:

La casilla de verificación Ascensor y seguridad debe estar marcada.

0
Rohit M 31 oct. 2017 a las 15:30

4 respuestas

La mejor respuesta

Puede verificar que los servicios actuales existen en Array usando Array.some() y agregar el atributo checked basado en verdad

var setChecked = particularPropertyAmenity.some(function(e) {
  return e.amenityName == value.amenityName;
});
htmlString += 'Amenities:  <input type="checkbox" ' + (setChecked ? 'checked' : '') + ' name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '"> ' + value.amenityName + '<br>';
var htmlString = '';
$(document).ready(function() {
  var allAmenities = {
    "status": "success",
    "count": 3,
    "data": [{
        "amenityId": "1",
        "propertylistId": "1",
        "amenityName": "Lift",

      },
      {

        "amenityId": "2",
        "propertylistId": "1",
        "amenityName": "Gym",
      },
      {

        "amenityId": "3",
        "propertylistId": "1",
        "amenityName": "Swimming Pool",
      },
      {

        "amenityId": "4",
        "propertylistId": "1",
        "amenityName": "Power backup",
      },
      {

        "amenityId": "5",
        "propertylistId": "1",
        "amenityName": "Security",
      },

    ]
  };



  var particularPropertyAmenity = [{
      "amenityName": "Lift",
      "amenityStatus": "Active"
    },
    {
      "amenityName": "Security",
      "amenityStatus": "Active"
    }
  ]

  htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';

  $.each(allAmenities['data'], function(key, value) {

    var setChecked = particularPropertyAmenity.some(function(e) {
      return e.amenityName == value.amenityName;
    });
    htmlString += 'Amenities:  <input type="checkbox" ' + (setChecked ? 'checked' : '') + ' name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '"> ' + value.amenityName + '<br>';
  });
  $('#linz').append(htmlString);

  htmlString += '</form>';

  $('.rentEdit').empty().append(htmlString);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="rentEdit"></div>
1
Satpal 31 oct. 2017 a las 12:49

Agregue el siguiente código en su secuencia de comandos.

$.each(particularPropertyAmenity, function(key, value) {
  $("input[value='"+value.amenityName+"']").prop('checked', true);
});
var htmlString = '';
$(document).ready(function(){
  var allAmenities = {
    "status": "success",
    "count": 3,
    "data": [{
      "amenityId": "1",
      "propertylistId": "1",
      "amenityName": "Lift",			 
    }, {		 
      "amenityId": "2",
      "propertylistId": "1",
      "amenityName": "Gym",
    }, {				 
      "amenityId": "3",
      "propertylistId": "1",
      "amenityName": "Swimming Pool",
    }, {						 
      "amenityId": "4",
      "propertylistId": "1",
      "amenityName": "Power backup",
    }, {
      "amenityId": "5",
      "propertylistId": "1",
      "amenityName": "Security",
    }]
  };

  var particularPropertyAmenity =	[   {
    "amenityName": "Lift",
    "amenityStatus": "Active"
  }, {
    "amenityName": "Security",
    "amenityStatus": "Active"
  }]

  htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';
				
  $.each( allAmenities['data'], function( key, value ) {
    htmlString += 'Amenities:  <input type="checkbox" name="amenity_check[]"  class="customcheckbox" value="'+value.amenityName+'"> '+value.amenityName+''; 
  });
  $('#linz').append(htmlString); 

  htmlString +='</form>';

  $('.rentEdit').empty().append(htmlString); 
  
  $.each(particularPropertyAmenity, function(key, value) {
    $("input[value='"+value.amenityName+"']").prop('checked', true);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="rentEdit"></div>
0
Makarand Patil 31 oct. 2017 a las 13:00

Puede agregar 'marcado' a sus datos de amenidades y usarlo para configurar cuadros específicos para ser marcados.

var htmlString = '';
$(document).ready(function() {
  var allAmenities = {
    "status": "success",
    "count": 3,
    "data": [{
        "amenityId": "1",
        "propertylistId": "1",
        "amenityName": "Lift",
      }, {
        "amenityId": "2",
        "propertylistId": "1",
        "amenityName": "Gym",
      }, {
        "amenityId": "3",
        "propertylistId": "1",
        "amenityName": "Swimming Pool",
      }, {

        "amenityId": "4",
        "propertylistId": "1",
        "amenityName": "Power backup",
      }, {
        "amenityId": "5",
        "propertylistId": "1",
        "amenityName": "Security",
      },

    ]
  };
  var particularPropertyAmenity = [{
    "amenityName": "Lift",
    "amenityStatus": "Active"
  }, {
    "amenityName": "Security",
    "amenityStatus": "Active"
  }]

  htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';

  $.each(allAmenities['data'], function(key, value) {
    var active = false;
    $.each(particularPropertyAmenity, function(i, v) {
      if (v.amenityName == value.amenityName) {
        active = v.amenityStatus == "Active";
        return;
      }
    });
    htmlString += 'Amenities:  <input type="checkbox" name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '" ' + (active ? 'checked' : '') + '> ' + value.amenityName + '';
  });
  $('#linz').append(htmlString);

  htmlString += '</form>';

  $('.rentEdit').empty().append(htmlString);

});

http://jsfiddle.net/jpwkyw37/1/

0
Wouter Bouwman 31 oct. 2017 a las 12:55

Use el selector de atributos:

  $.each( particularPropertyAmenity, function( key, value ) {  
                   if(value.amenityStatus=="Active")
                   {
                    $("input[value='"+value.amenityName+"']").prop("checked",true);
                   }
})

Aquí hay una demostración:

var htmlString = '';
	$(document).ready(function(){
		var allAmenities = {
					  "status": "success",
					  "count": 3,
					  "data": [{
						  "amenityId": "1",
						  "propertylistId": "1",
						  "amenityName": "Lift",
						 
						},
						{
						 
						  "amenityId": "2",
						  "propertylistId": "1",
						  "amenityName": "Gym",
						},
						{
						 
						  "amenityId": "3",
						  "propertylistId": "1",
						  "amenityName": "Swimming Pool",
						},
						{
						 
						  "amenityId": "4",
						  "propertylistId": "1",
						  "amenityName": "Power backup",
						},
						{
						 
						  "amenityId": "5",
						  "propertylistId": "1",
						  "amenityName": "Security",
						},

					  ]
					};



		      var particularPropertyAmenity =	[   {
						  "amenityName": "Lift",
						  "amenityStatus": "Active"
						},
						{
						 "amenityName": "Security",
						  "amenityStatus": "Active"
						}
				]

		   htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';
				
				 $.each( allAmenities['data'], function( key, value ) {
				 	
					htmlString += 'Amenities:  <input type="checkbox" name="amenity_check[]"  class="customcheckbox" value="'+value.amenityName+'"> '+value.amenityName+''; 
					});
				 $('#linz').append(htmlString); 

				htmlString +='</form>';

			$('.rentEdit').empty().append(htmlString); 
      				 $.each( particularPropertyAmenity, function( key, value ) {  
               if(value.amenityStatus=="Active")
               {
                $("input[value='"+value.amenityName+"']").prop("checked",true);
               }
                 
               });
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="rentEdit"></div>
1
Mehdi Bouzidi 31 oct. 2017 a las 12:51