freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aed808826	Disable an Element Using jQuery	6		Desativar um elemento usando jQuery

Description

Você também pode alterar as propriedades não CSS dos elementos HTML com jQuery. Por exemplo, você pode desativar os botões. Quando você desativa um botão, ele fica cinza e não pode mais ser clicado. jQuery tem uma função chamada .prop() que permite ajustar as propriedades dos elementos. Veja como você desabilitaria todos os botões: $("button").prop("disabled", true); Desativar apenas o botão target1 .

Instructions

Tests

tests:
  - text: Desativar o seu botão <code>target1</code> .
    testString: 'assert($("#target1") && $("#target1").prop("disabled") && code.match(/[""]disabled[""],( true|true)/g), "Disable your <code>target1</code> button.");'
  - text: Não desabilite nenhum outro botão.
    testString: 'assert($("#target2") && !$("#target2").prop("disabled"), "Do not disable any other buttons.");'
  - text: Use apenas o jQuery para adicionar essas classes ao 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