freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aed808826	Disable an Element Using jQuery	6		Deshabilitar un elemento usando jQuery

Description

También puede cambiar las propiedades no CSS de elementos HTML con jQuery. Por ejemplo, puede deshabilitar botones. Cuando desactivas un botón, se vuelve de color gris y ya no se puede hacer clic en él. jQuery tiene una función llamada .prop() que le permite ajustar las propiedades de los elementos. A continuación le indicamos cómo deshabilitaría todos los botones: $("button").prop("disabled", true); Deshabilita solo el botón target1 .

Instructions

Tests

tests:
  - text: Desactiva tu botón <code>target1</code> .
    testString: 'assert($("#target1") && $("#target1").prop("disabled") && code.match(/[""]disabled[""],( true|true)/g), "Disable your <code>target1</code> button.");'
  - text: No deshabilite ningún otro botón.
    testString: 'assert($("#target2") && !$("#target2").prop("disabled"), "Do not disable any other buttons.");'
  - text: Solo use jQuery para agregar estas clases al elemento.
    testString: 'assert(!code.match(/disabled[^<]*>/g), "Only use jQuery to add these classes to the element.");'

Challenge Seed

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution

// solution required

2.5 KiB Raw Blame History